使用html与css实现一个漂亮的网页

效果图：

实现的代码：

html代码：

<!DOCTYPE >
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一个精美的网页</title><link rel="stylesheet" href="./css/index.css"><style type="text/css">.first{background: url(./img/前端学院设计图_02.png);background-size: 100% 100%;}.three{background: url(./img/前端学院设计图_20.png);background-size: 100% 100%;}</style>
</head>
<body ><div class="first" ><div class="first_header"><h1>Hello World</h1></div><div class="first_word"><p>China is speeding up strategic plan. standards, traffic rules. laws and regulations<br>on accident-incurred liabilities for its smart car industry, Economic Information <br>Daily reported Thursday.</p></div><div class="f_in_table"><form action="#"><div  class="f_e"><input type="email" name="" value="denis@getcraftworkcom"/></div> <div class="f_p"><input  type="password" name="" value="Create your password"/></div><div class="f_s"><input type="submit" value="Submit form" /></div> </form></div></div></div><div class="second"><div class="pic"><img src="./img/前端学院设计图_05.png" alt=""></div><div class="s_in"><div class="s_in_d"><img src="./img/前端学院设计图_09.png" alt=""><div class="s_in_id_w"><h3>Mobile First</h3><p>All modulz are built mobile-first for maximumdevice compatibility</p></div></div><div class="s_in_d in2"><img src="./img/前端学院设计图_12.png" alt=""><div class="s_in_id_w"><h3>Accessibility</h3><p>Support for IEB, mobile and tablet devices.screen readers and color blind</p></div></div><div class="s_in_d"> <img src="./img/前端学院设计图_16.png" alt=""><div class="s_in_id_w"><h3>Fluid Typography</h3><p>On different screen sizes. fonts automagicallyscale with the viewport</p></div></div><div class="s_in_d in2" > <img src="./img/前端学院设计图_17.png" alt=""><div class="s_in_id_w"><h3>Customization</h3><p>Make any design your own using the StyleEditor. Personalize fonts. colors. and layouts tocreate the custom look you want.</p></div></div></div></div><div class="three"><div class="three_l"><div class="three_l_w"><h3>Supportive policies for China's smart car</h3><p>China will come up with its own smart carstandards, traffic rules. laws and regulationsrelating to safety, according to the ChinaIndustry Innovation Alliance for the Intelli-gent and Connected Vehicles.</p></div><div class="three_l_f"><button class="btn" value="">CHECK OUT FEATURES</button><button class="btn" value="">TRY PRODUCT FOR FREE</button></div></div><div class="three_r"><img src="./img/第三页右_03.png" alt=""></div></div><div class="fouth"><div class="f_top"><h1>Try Our Awesome Products</h1></div><div class="f_word"><div class="w1"><img src="./img/前端学院设计图_27.png" alt=""><p>Li Jun. a China Academy of Engi-neering academician and alsodirector of the alliances experts'committee. said that China willalso launch design guidance forsmart cars. smart map architec-ture and standards for testgrounds</p></div><div class="w1"><img src="./img/前端学院设计图_29.png" alt=""><p>Li said the smart car industry isable to enlarge the current carindustry by 1 trillion yuan ($158.15billion) and also able to boost fastdevelopment in SC. internet ofcars, big data. artificial intelligenceand new-energy vehicles</p></div><div class="w1"><img src="./img/前端学院设计图_31.png" alt=""><p>Zhang Junyi. a partner with NIOCapital. said that the smart car isthe trend for the car industry andChina's auto sector will usher in anew key development stage withthe improvement of infrastructure,technology. policies and laws.Learn How to Improve YourPersonal Business</p></div></div><div class="f_c1"><img src="./img/前端学院设计图_37.png" alt=""><div class="f_c1_w1"><h1>Learn How to Improve YourPersonal Business</h1><p>Li Jun. a China Academy of Engineeringacademician and also director of thealliance's expertS committee. said thatChina will also launch design guidancefor smart cars. smart map architectureand standards for test grounds.</p></div></div><div class="f_c2"><img src="./img/前端学院设计图_41.png" alt=""><div  class="f_c1_w2"><h1>Choose Between Two BeautifullyDesigned Color Schemes.</h1><p> China will come up with its own smartcar standards. traffic rules, laws and reg-ulations relating to safety. according tothe China Industry Innovation Alliancefor the Intelligent and ConnectedVehicles.</p></div></div></div><div class="fifth"><div class="fifth_word"><h1 class="">Our Awesome Crew</h1><p>our unique online teaching style makes learning easy for everyone. Whether you<br>are trying to land a new job. brush up on your skills.</p></div><div class="fifth_pep"><div class="fifth_pep_pic"><img src="./img/赵思远_45.png" alt=""></div><div class="fifth_pep_pic"><img src="./img/前端学院设计图_45.png" alt=""></div><div class="fifth_pep_pic"><img src="./img/前端学院设计图_49.png" alt=""></div><div class="fifth_pep_pic"><img src="./img/前端学院设计图_51.png" alt=""></div></div></div><div class="fix"><div class="fix_l"><h1>FELL FREE TO WRITE US</h1><form action="#"><input type="email" value="E-mail" ><input type="text" value="subject" ><input type="text" value="Message" ><input type="submit" value="SEND" ></form></div><div class="fix_r"><h1>Contacts</h1><p>Make any design your own using the StyleEditor. Personalize fonts, colors. and layouts tocreate the custom look you want</p><ul><li><img src="./img/最后_06.png" alt=""><a href="">360 King Street Feastrvale<br> Trevose. PA 19057</a></li><li><img src="./img/最后_09.png" alt=""><a href=""> Q, (755) 564-84-12</a></li><li><img src="./img/最后_11.png" alt=""><a href="">youname@mail.com</a></li></ul></div></div><div class="last"><div class="last_in"><h3>LEARN MORE</h3><ul><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li></ul></div><div class="last_in"><h3>About us</h3><ul><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li></ul></div><div class="last_in"><h3>SUPPORT</h3><ul><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li></ul></div><div class="last_in"><h3>ENJOY YOUR LIFE</h3><ul><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li><li><a href="">About us</a></li></ul></div></div>
</body>
</html>

实现的css

/* first */
*{margin: 0;padding: 0;
}
.first{margin: 0 auto;padding: 0;height: 890px;width: 1600px;border: 1px transparent solid;border-bottom: 1px gray solid;background: url(./img/1.jpg);
}
.first_header{margin-top: 206px;margin-left: 634px;width: 335px;height: 72px;/* border: 1px blue solid; */
}
.first_header h1{font-style: none;position: relative;line-height: 72px;font-size: 62px;font-style: initial;font-weight: 60;font-family: sans-serif;color: rgb(255, 255, 255);
}
.first_word{width: 770px;height: 85px;margin-top: 75px;margin-left: 412px;/* border: 1px blue solid; */text-align: center;
}
.first_word p{position: relative;line-height: 32px;font-size: 20px;font-style: initial;font-family: sans-serif;font-weight: 60;color:#fff;
}
.frist_incontent .f_in_title{margin-top: 145px;margin-left: 665px;width: 245px;height: 62px;/* border: 1px blue solid; */
}
.f_in_table {float: left;width: 770px;height: 45px;margin-top: 169px;margin-left: 414px;/* border: 1px blue solid; */
}
.f_in_table .f_e{position: absolute;display: block;width: 290px;height: 45px;margin-left: 2px;/* border: 1px blue solid; */background-color: transparent;}
.f_in_table .f_p{position: absolute;display: block;width: 290px;height: 45px;margin-left: 322px;/* border: 1px red solid; */background-color: transparent;
}
.f_in_table .f_s{position: absolute;display: block;float: right;width: 125px;height: 45px;margin-left: 644px;/* border: 1px yellow solid; */background-color: transparent;
}
.f_in_table input{font-size: 14px;line-height: 24px;color: rgb(100, 100, 100);margin-top: 2px;width: 290px;height: 43px;border: 0;  outline: none; background-color: rgba(0, 0, 0, 0);
}
.f_in_table input:hover{border:1px solid white;
}
.f_in_table .f_s input{margin: 2px;font-size: 14px;line-height: 24px;color: rgb(100, 100, 100);width: 125px;height: 45px;border: 0;  outline: none; background-color: rgba(0, 0, 0, 0);
}
.f_in_table .f_s input:hover{margin-top:4px;  margin-bottom:0px;
}
/* second */
.second{margin: 0 auto;padding: 0;height: 710px;width: 1600px;background-color:#f2f2f2;border: 1px transparent solid;border-bottom: 1px gray solid;
}
.second .pic{margin-top: 80px;margin-left: 470px;width: 680px;height: 110px;/* border: 1px yellow solid; */
}
.second .pic img{max-width: 100%;max-height: 100%;margin-left: auto;}
.second .s_in{position: absolute;height: 300px;width: 1045px;margin-top: 50px;left:50%;margin-left: -540px;/* border: 1px red solid; */}.second .s_in .s_in_d{float: left;width: 468Px;height: 142px;margin: 5px 20px;/* border: 1px palevioletred solid; */
}
.second .s_in .s_in_d img{width: 49px;height: 49px;float: left;margin-top: 0px;float: left;
}.second .s_in .s_in_d .s_in_id_w{width: 370px;height: 100px;float: left;margin-left: 30px;
}
.second .s_in .s_in_d h3{display: block;float: left;margin-bottom: 25px;margin-left: 30px;font-weight: 60;line-height: 32px;font-size: 20px;}
.second .s_in .s_in_d p{display: block;float: left;margin-left: 30px;font-weight: 60;line-height: 26px;font-size: 16px;
}
/* three */
.three{margin: 0 auto;padding: 0;height: 800px;width: 1600px;/* background:url(./img/前端学院设计图_20.png); */border: 1px transparent solid;border-bottom: 1px gray solid;
}
.three .three_l{float: left;width: 530px;height: 460px;margin-top: 175px;margin-left: 314px;/* border: 1px yellow solid; */
}
.three .three_l .three_l_w{position: relative;width: 360px;height: 335px;/* border: 1px yellow solid; */}
.three .three_l .three_l_w h3{display: block;line-height: 52px;font-size: 42px;color:#ffffff;font-weight: 80;}
.three .three_l .three_l_w p{display: block;margin-top: 30px;line-height: 28px;font-size: 18px;color:#b6b8b4;font-weight: 60;
}
.three .three_l .three_l_f {position: absolute;width: 515px;height: 65px;/* border: 1px yellow solid; */margin-top: 45px;
}
.three .three_l .three_l_f .btn{position: relative;width: 240px;height: 60px;/* border: 1px yellow solid; */border-radius: 3px;text-align: center;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0);border: 1px transparent solid;
}
.three .three_l .three_l_f :last-child{position: relative;float: right;margin-right: 12px
}
.three .three_l .three_l_f .btn:hover {color: rgb(20, 17, 17);background-color: white;box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);}
.three .three_l .three_l_f .btn:focus{outline: none;
}
.three_r{width: 585px;height: 537px;position: absolute;margin-top: 135px;margin-left: 1015px;/* border: 1px yellow solid; */background-color: #fff;
}
.three_r img{max-width: 100%;max-height: 100%;}
/* fouth */
.fouth{width: 1600px;height: 1605px;margin: 0 auto;padding: 0;border: 1px transparent solid;border-bottom: 1px gray solid;
}
.fouth .f_top{margin-left: 315px;margin-top: 100px;width: 970px;height: 45px;/* border: 1px yellow solid; */text-align: center;
}
.fouth .f_top h1{line-height: 52px;font-size: 42px;font-weight: 60;
}
.fouth .f_word{margin-top: 75px;margin-left: 315px;width: 970px;height: 520px;/* border: 1px yellow solid; */display: flex;display: -webkit-flex;
}
.w1{width: 270px;height: 315px;/* border: 1px red solid; */text-align: center;}
.w1 img{margin-bottom: 20px;
}
.w1:nth-child(2),.w1:first-child {margin-right: 80px;
}.w1 p{font-weight: 40;line-height: 26px;font-size: 16px;
}
.f_c1 ,.f_c2{margin-left: 315px;width: 970px;height: 365px;/* border: 1px red solid; */text-align: center;
}
.f_c2{margin-top: 65px;
}
.f_c1 img ,.f_c2 img{width: 570px;height: 350px;
}
.f_c1 img {float: left;
}
.f_c2 img {float: right;
}
.f_c1_w1{width: 320px;height: 350px;float: right;/* border: 1px red solid; */
}
.f_c1_w2{width: 320px;height: 350px;float: left;/* border: 1px red solid; */
}
.f_c1_w1 h1 ,.f_c1_w2 h1{line-height: 32px;font-size: 20px;font-weight: 600;text-align: left;display: block;margin-top: 80px;margin-bottom: 27px;
}
.f_c1_w1 p ,.f_c1_w2 p{line-height: 28px;font-size: 16px;font-weight: 100;text-align: left;display: block;
}
/* fifth */
.fifth{width: 1600px;height: 1088px;margin: 0 auto;padding: 0;border: 1px transparent solid;border-bottom: 1px gray solid;
}
.fifth .fifth_word{height: 160px;width: 100%;text-align: center;
}
.fifth .fifth_word h1{display: block;margin-top: 75px;line-height: 52px;font-size: 42px;font-weight: 60;
}
.fifth .fifth_word p{line-height: 28px;font-size: 18px;font-weight: 100;display: block;margin-top: 45px;
}
.fifth_pep{float: left;margin-left: 315px;margin-top: 40px;width: 970px;height: 735px;/* border:1px yellow solid; */display: flex;flex-wrap: wrap;}
.fifth_pep .fifth_pep_pic{width: 472px;height: 336px;background-color: #000000;
}
.fifth_pep .fifth_pep_pic:nth-child(1),.fifth_pep .fifth_pep_pic:nth-child(3){margin-right: 20px;
}
.fifth_pep img{width: 100%;height: 100%;
}
.fifth_pep img:hover{opacity: 0.5;box-shadow: 10px 10px 5px #888888;
}
/* fix */
.fix{width: 1600px;height: 706px;margin: 0 auto;padding: 0;border: 1px transparent solid;
}
.fix .fix_l{width: 470px;height: 560px;margin-top: 72px;margin-left: 315px;border: 1px gray solid;border-radius: 10px;text-align: center;float: left;
}
.fix .fix_l h1{line-height: 31px;font-size: 16px;font-weight: 80;display: block;margin-top: 47px;
}
.fix .fix_l form input{width: 370px;height: 52px;margin-top: 30px;/* text-align: center; */color: gray;border-radius: 5px;border: 1px gray solid;text-indent: 2px;
}
.fix .fix_l form input:focus{outline: none;
}
.fix .fix_l form input:hover{border: 2px gray solid;
}
.fix .fix_l form input:nth-child(3){width: 370px;height: 145px;
}
.fix .fix_l form input:last-child{background: #141414;color: honeydew;text-align: center;
}.fix .fix_r{float: right;width: 470px;height: 560px;margin-top: 72px;margin-right: 315px;border: 1px gray solid;border-radius: 10px;text-align: center;
}
.fix .fix_r h1{text-align: left;display: block;margin-top: 100px;line-height: 52px;font-size: 42px;font-weight: 40;margin-left: 85px;
}
.fix .fix_r p{display: block;margin-top: 32px;line-height: 26px;font-size: 16px;font-weight: 40;text-align: left;margin-left: 85px;
}
.fix .fix_r ul{list-style-image: url(./img/最后_06.png);display: block;margin-top: 40px;width: 380px;height: 170px;float: right;/* margin-left: 85px; *//* border: 1px yellow solid; */list-style: none;text-align: left;
}
.fix .fix_r ul li{line-height: 55px;width: 300px;
}
.fix .fix_r ul li img{display: inline-block;vertical-align: middle;
}
.fix .fix_r ul li a{display: inline-block;margin-left: 20px;line-height: 26px;font-size: 16px;text-align: left;text-decoration:none;color:gray;
}
.fix .fix_r ul li a:first-child{margin-top: 10px;
}
/* last */
.last{margin: 0 auto;display: flex;width: 1600px;height: 410px;background-color: #000000;border: 1px transparent solid;
}
.last_in{width: 300px;height:230px;/* border: 1px red solid; */margin-top: 80px;
}
.last_in:first-child{margin-left: 215px;
}
.last_in h3{color: white;line-height: 28px;font-size: 14px;margin-bottom: 30px;
}
.last_in ul li{/* color: white;line-height: 46px;font-size: 12px;font-weight: 40; */list-style: none;}
.last_in ul li a{color: white;line-height: 46px;font-size: 12px;font-weight: 20;text-decoration:none;
}
.last_in ul li a:hover{text-decoration: blink;
}

图片与代码下载链接：

https://download.csdn.net/download/lsl30522/12257980

使用html与css实现一个漂亮的网页相关推荐

[Demo]用简单的html，css做一个漂亮的网页！
下面是实现效果: 预览地址:https://jh-leong.github.io/Dmeo/ife_1/index.html 代码如下: html <!DOCTYPE html> < ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
PS经典教程：从零开始设计一个漂亮的网页
你是否曾经想过设计一个漂亮的网页,但是却不知道怎样入手?说实话,几年前我也是这样.当我浏览网页的时候我看到这么多好看的网页,我就希望自己有技术创作这样的设计作品. 今天我可以这么做了,而且我将教你怎么 ...
从零开始设计一个漂亮的网页（译）
译者:Joe 译文来源:http://xiebiji.com/2009/09/design_a_beautiful_website/ 原文来自:Design a Beautiful Website F ...
html、css 实现一个漂亮的表格
最终效果:利用html.css制作一个美观.大方的表格,而且很简单,容易上手. 前言: 在css出现之前,网页通常使用表格布局: 如今,时代变了,表格不再适用于网页布局, 因为表格的渲染速度过慢浏览 ...
用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
“数万行代码“教你用html和css编写一个精美的网页
我是歌谣放弃很容易但是坚持一定很酷 1前言作为一名前端开发工程师开发一个完美的网页也是我们的必修课之一逻辑写起来有时候不是那么的难据说页面样式才是最难的一课本文内容纯属自己个人观点欢迎 ...
用纯Python就能写一个漂亮的网页
我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互: 要懂后端,比如Python里面的Django或者Flask,或者是Java里面的Spring ...

使用html与css实现一个漂亮的网页

使用html与css实现一个漂亮的网页相关推荐

最新文章

热门文章