首页 > 代码库 > 入门级前端 简单的网页书写

入门级前端 简单的网页书写

2024-08-13 17:50:24   230人阅读

 <!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>

入门级前端 简单的网页书写


联系
我们