首页 > 代码库 > 入门级前端 简单的网页书写
入门级前端 简单的网页书写
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>萧瑟秋风皆不是</title> | |
<link rel="stylesheet" href="http://www.mamicode.com/css/qiufen.css"> | |
</head> | |
<body> | |
<!--首项页头--> | |
<div class="yemian"> | |
<div class="kuangjia"> | |
<div class="qw"> | |
<div class="qe"> <img src="http://www.mamicode.com/img/01_0015_aventador.png" ></div> | |
<P class="xz">Follow us on <span style="color: aqua">Twitter,Facebook</span> and <span style="color: aqua">Dribble</span></P> | |
<nav> | |
<ul> | |
<li><span style="color: aqua">HOME</span></li> | |
<li>PORTFOLIO</li> | |
<li>STORE</li> | |
<li>ABOUTME</li> | |
<li>CONTACT</li> | |
</ul> | |
<img src="http://www.mamicode.com/img/01_0023_Av.png" class="xiaotubiao"> | |
</nav> | |
</div> | |
<!--此项页身--> | |
<div> | |
<div class="qr"> | |
<div> | |
<img src="http://www.mamicode.com/img/01_0022_arrow-right.png" class="jt"> | |
<img src="http://www.mamicode.com/img/01_0021_arrow-left.png" class="jt2"> | |
</div> | |
<div class="qa"> | |
<p class="p2">You can Link slides to ar any url Nice</p> | |
</div> | |
</div> | |
<!--小圆点--> | |
<div class="yd"> | |
<img src="http://www.mamicode.com/img/01_0000_dot-1.png" > | |
<img src="http://www.mamicode.com/img/01_0001_dot-2.png" > | |
<img src="http://www.mamicode.com/img/01_0002_dot-3.png" > | |
<img src="http://www.mamicode.com/img/01_0003_dot-4.png" > | |
</div> | |
</div> | |
<!--蓝色条部分--> | |
<div class="lt"> | |
<!--文字背景--> | |
<div class="wb"> | |
<h3 style="color: aqua">MY RECENT WORK</h3> | |
</div> | |
</div> | |
<!--四个图框--> | |
<div class="dk"> | |
<div class="wq"> | |
<img src="http://www.mamicode.com/img/01_0005_proj-1.png" > | |
<div class="k1">sd sds sdsd sds</div> | |
</div> | |
<div class="we"> | |
<img src="http://www.mamicode.com/img/01_0017_proj-2.png" > | |
<div class="k1">sda asdwas sdasd </div> | |
</div> | |
<div class="wr"> | |
<img src="http://www.mamicode.com/img/01_0019_proj-3.png" > | |
<div class="k1">asd sad asda sad </div> | |
</div> | |
<div class="wt"> | |
<img src="http://www.mamicode.com/img/01_0018_proj-4.png" > | |
<div class="k1">asd sdasd sda asd </div> | |
</div> | |
</div> | |
<div> | |
<!--下划线--> | |
<hr style="color: aqua"> | |
</div> | |
<!--广告--> | |
<div> | |
<div class="ggk"> | |
<img src="http://www.mamicode.com/img/01_0000_dribbble.png" class="tq"> | |
<img src="http://www.mamicode.com/img/01_0002_smashing.png" class="tw"> | |
<img src="http://www.mamicode.com/img/01_0001_android.png" class="te"> | |
<img src="http://www.mamicode.com/img/01_0003_google.png" class="tr"> | |
<img src="http://www.mamicode.com/img/01_0004_the-washington-post.png" class="ty"> | |
</div> | |
</div> | |
</div> | |
<!--页尾--> | |
<div class="yw"> | |
<div class="ka"> | |
<img src="http://www.mamicode.com/img/01_0015_aventador.png" class="mz"> | |
<p class="zx">asda asdasd asd </p> | |
</div> | |
<div class="kb"> | |
<h2>About Aventador</h2> | |
<p class="zc">asdasd asdasdas dasd asdasdasd asd | |
asdasd asd asd asd asdasdasdadasdasdasd asdasdasdasda | |
asdasdasda asdasdasdasda asd asd <span style="color: aqua">asd asd asdas</span> | |
</p> | |
</div> | |
<div class="kc"> | |
<h2>Via Twitter</h2> | |
<p class="zc">asdasdas asdasdas dasdasdawdssdf asd vsd</p> | |
</div> | |
<div class="yj"> | |
<p class="zv">asd dasdasda dasdasdas sadasd </p> | |
<p class="zb">asd asd dewr rter wett qweqrrer qwe</p> | |
</div> | |
<div class="xj"> | |
<div class="bn"> | |
<img src="http://www.mamicode.com/img/01_0006_normal.png/" > | |
<img src="http://www.mamicode.com/img/01_0007_normal.png" > | |
<img src="http://www.mamicode.com/img/01_0008_n.png" > | |
<img src="http://www.mamicode.com/img/01_0010_n.png" > | |
<img src="http://www.mamicode.com/img/01_0012_n.png" > | |
<img src="http://www.mamicode.com/img/01_0009_n.png" > | |
<img src="http://www.mamicode.com/img/01_0011_n.png" > | |
<img src="http://www.mamicode.com/img/01_0013_n.png" > | |
<img src="http://www.mamicode.com/img/01_0014_n.png" > | |
</div> | |
</div> | |
<!--邮箱脚--> | |
<div class="yk"> | |
<p class="yxz">www.7845545421@qq.com</p> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
入门级前端 简单的网页书写
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。