第七课《来做一个漂亮的网站》
一、安装photoshop，学习切图
学习资料：
二、依照设计图进行页面实现
设计稿描述：
- 代码风格符合某种编码规范（选择使用百度编码规范）
- 尽可能按照设计稿的尺寸进行实现
- 设计稿中的图片或文字素材在实现时可以不一致
- 充分应用上之前学习到的各种布局方式，尽可能几种方式都运用尝试一次，比较各种布局的适用场景
- 设计稿中下方导师介绍图片，左上角灰色底表示，鼠标hover到图片上时的效果变化
- 不需要考虑兼容IE浏览器
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class 7</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
<p>China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities for its smart car industry, Economic Information Daily reported Thursday.</p>
<form action="#" name="sign_up">
<h3>Create Your Account</h3>
<p>It is absolutely free</p>
<div class="header_form">
<input type="text" value="denis@getgraftwork.com">
<input type="password" placeholder="Create your password">
<button type="submit">Sign Up</button>
</div>
</form>
</header>
<section id="features">
<p class="subheading">Boatloads of Awesome</p>
<h2>Ready-made, customizable, HTML landing page sections</h2>
<div id="features_content" class="clearfix">
<div class="set_left">
<div>
<img id="mobile_first" src="img/title_iphone_icon.png">
<div class="features_details_left features_details_bottom">
<h3>Mobile First</h3>
<p>All modulz are built mobile-first for maximum device compatibility.</p>
</div>
</div>
<div>
<img id="fluid_typography" src="img/title_pencil_icon.png">
<div class="features_details_left">
<h3>Fluid Typography</h3>
<p>On different screen sizes, fonts automagically scale with the viewport.</p>
</div>
</div>
</div>
<div class="set_right">
<div>
<img id="accessibility" src="img/title_check_icon.png">
<div class="features_details_left features_details_bottom">
<h3>Accessibility</h3>
<p>Support for IE8, mobile and tablet devices, screenreaders and color blind.</p>
</div>
</div>
<div>
<img id="customization" src="img/title_settings_icon.png">
<div class="features_details_left">
<h3>Customization</h3>
<p>Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to creste the custom look you want.</p>
</div>
</div>
</div>
</div>
</section>
<section id="case">
<div id="case_details">
<h2>Supportive policies for China's smart car</h2>
<p>China will come up its own smart car standards, traffic rules, laws and regulations relating to safety,according to the China Industry Innovation Alliance for the Intelli-gent and Connected Vehicles.</p>
</div>
<form action="#" name="features">
<button type="submit">Check out Features</button>
<button type="submit">Try product for Free</button>
</form>
</section>
<section id="products">
<h2>Try Our Awesome Products</h2>
<div>
<article>
<img src="img/title_singleton.png">
<p>Li Jun, a China Academy of Engi-neering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architec-ture and standards for test grounds.</p>
</article>
<article>
<img src="img/title_hero.png">
<p>Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan ($158.15 billion) and also able to boost fast development in 5G, internet of cars, big data, artificial intelligence and new-energy vehicles.</p>
</article>
<article>
<img src="img/title_portland.png">
<p>Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.</p>
</article>
</div>
</section>
<div id="function" class="clearfix">
<div id="function_wrap">
<img src="img/pic_photo_1.png" id="learn">
<div id="learn_details">
<h3>Learn How to Improve Your Personal Business</h3>
<p>Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architec-ture and standards for test grounds.</p>
</div>
<img src="img/pic_photo_2.png" id="choose">
<div id="choose_details">
<h3>Choose Between Two Beautifully Designed Color Schemes.</h3>
<p>China will come up its own smart car standards, traffic rules, laws and reg-ulations relating to safety,according to the China Industry Innovation Alliance for the Intelligent and Connected Vehicles.</p>
</div>
</div>
</div>
<section id="crew">
<h2>Our Awesome Crew</h2>
<p>Our unique online teaching style makes learning easy for everyone, Whether you are trying to land a new job, brush up on your skills.</p>
<div>
<img src="img/pic_crew_1.png">
<img src="img/pic_crew_2.png">
<img src="img/pic_crew_3.png">
<img src="img/pic_crew_4.png">
</div>
</section>
<section id="contacts">
<div id="contacts_wrap">
<form action="#" name="contacts_form">
<h3>Fell free to Write Us</h3>
<input type="email" placeholder="E-mail">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
</form>
<div id="contacts_details">
<h2>Contacts</h2>
<p>Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to create the custom look you want.</p>
<div class="img_details">
<img src="img/title_map_icon.png">
<p>360 King Street
Feastrvale Trevose, PA 19057 </p>
</div>
<div class="img_details">
<img src="img/title_phone_icon.png">
<p>(755) 564-84-12</p>
</div>
<div class="img_details">
<img src="img/title_mail_icon.png">
<p>youname@mail.com</p>
</div>
</div>
</div>
</section>
<footer>
<div id="footer_wrap">
<nav>
<h3>Learn More</h3>
<ul>
<li><a href="#">How it works?</a></li>
<li><a href="#">Meeting tools</a></li>
<li><a href="#">Live streaming</a></li>
<li><a href="#">Contact method</a></li>
</ul>
</nav>
<nav>
<h3>About Us</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Privacy police</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</nav>
<nav>
<h3>Support</h3>
<ul>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Live chat</a></li>
<li><a href="#">Phone call</a></li>
</ul>
</nav>
<nav>
<h3>Enjoy your Life</h3>
<p>Great web UI kit for designers, freelancers or business.</p>
<div id="share_link">
<a href="#"><img src="img/menu_twitter_icon.png"></a>
<a href="#"><img src="img/menu_facebook_icon.png"></a>
<a href="#"><img src="img/menu_google_icon.png"></a>
<a href="#"><img src="img/menu_tumbler_icon.png"></a>
<a href="#"><img src="img/menu_pinterest_icon.png"></a>
<a href="#"><img src="img/menu_linkedIn_icon.png"> </a>
</div>
</nav>
</div>
</footer>
</body>
</html>
CSS:
/*css reset*/
body,h1,h2,h3,p,input,button,ul {
margin: 0;
padding: 0;
}
body,input,button,textarea {
font: 12px/1.5 sans-serif;
}
h1,h2,h3 {
font-size: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/*public styles*/
body {
min-width: 1180px;
max-width: 1600px;
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
/*header styles*/
header {
position: relative;
height: 990px;
color: #fff;
background-image: url(img/background_banner.png);
background-color: #000; /*当背景图片无法加载时保证文字可识别*/
}
h1 {
position: absolute;
top: 208px;
left: 50%;
transform: translate(-50%);
font: 62px/72px ExtraLight;
}
header p {
position: absolute;
top: 343px;
left: 50%;
transform: translate(-50%);
width: 766px;
font: 20px/32px ExtraLight;
text-align: center;
opacity: 0.7;
}
header form {
position: absolute;
top: 530px;
left: 50%;
transform: translate(-50%);
width: 970px;
height: 250px;
border:1px solid rgba(255,255,255,.2);
}
header h3 {
position: absolute;
top: 61px;
left: 50%;
transform: translate(-50%);
font: 600 16px/28px light;
text-transform: uppercase;
letter-spacing: 4px;
}
header form p {
position: absolute;
top: 93px;
text-align: center;
font: 12px light;
text-transform: uppercase;
letter-spacing: 2px;
opacity: .3;
}
.header_form {
display: flex;
position: absolute;
top: 148px;
left: 50%;
transform: translate(-50%);
width: 769px;
justify-content: space-between;
}
header input {
width: 292px;
height: 50px;
border: 1px solid rgba(255, 255, 255, .2);
font: 14px/26px light;
background-color: transparent;
color: #fff;
text-indent: 25px;
}
header button {
width: 125px;
height: 50px;
background-color: #fff;
border: 0;
border-radius: 1px;
font: 700 12px/22px light;
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
}
/*feature styles*/
#features {
position: relative;
height: 710px;
color: #0e0e0e;
background-color: #fff;
}
.subheading {
position: absolute;
top: 89px;
left: 50%;
transform: translate(-50%);
font: 600 14px/28px Light;
text-transform: uppercase;
letter-spacing: 2px;
}
#features h2 {
margin: 0 auto;
padding-top: 141px;
width: 800px;
font: 42px/52px ExtraLight;
text-align: center;
}
#features_content {
margin: 0 auto;
padding-top: 75px;
width: 1045px;
}
#features img {
float: left;
}
#accessibility {
margin-left: -10px; /*由于图标宽度不一致，需要设置使其垂直方向右对齐*/
}
#fluid_typography {
margin-left: -19px;
}
#customization {
margin-left: -20px;
}
#features h3 {
margin-bottom: 14px;
font: 600 20px/32px Light;
}
.features_details_left {
margin-left: 61px;
}
.features_details_bottom {
margin-bottom: 74px;
}
.features_details_left p {
width: 360px;
font: 16px/26px ExtraLight;
opacity: .7;
}
.set_left {
float: left;
}
.set_right {
float: right;
}
/*case styles*/
#case {
position: relative;
height: 800px;
color: #fff;
background-image: url(img/background_content.png);
background-color: #000;
}
#case_details {
position: absolute;
top: 193px;
left: 315px;
width: 380px;
}
#case h2 {
font: 42px/52px ExtraLight;
}
#case p {
padding-top: 30px;
font: 18px/28px ExtraLight;
opacity: .7;
}
#case form {
position: absolute;
top: 570px;
left: 315px;
}
#case button {
border-radius: 1px;
text-transform: uppercase;
font: 600 12px Light;
letter-spacing: 2px;
}
#case form button:first-of-type {
border: 0;
width: 240px;
height: 60px;
color: #000;
background-color: #fff;
}
#case form button:last-of-type {
margin-left: 30px;
border: 1px solid rgba(255, 255, 255, .3);
width: 235px;
height: 60px;
color: #fff;
background-color: transparent;
}
/*products styles*/
#products {
position: relative;
height: 579px;
background-color: #fff;
}
#products h2 {
position: absolute;
top: 96px;
left: 50%;
transform: translate(-50%);
font: 42px/52px ExtraLight;
}
#products div {
display: flex;
justify-content: space-between;
position: absolute;
top: 228px;
left: 50%;
transform: translate(-50%);
width: 960px;
}
#products article {
width: 260px;
text-align: center;
font: 16px/26px ExtraLight;
}
#products p {
margin-top: 35px;
opacity: .7;
}
/*function styles*/
#function {
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
height: 999px;
background: #fff;
}
#function_wrap {
margin: 115px auto 0;
width: 980px;
}
#function h3 {
padding-top: 72px;
padding-bottom: 24px;
font: 600 20px/32px Light;
}
#function p {
font: 16px/28px ExtraLight;
opacity: .7;
}
#learn {
float: left;
}
#learn_details {
margin-bottom: 80px;
margin-left: 670px;
width: 307px;
height: 350px;
}
#learn_details h3 {
width: 280px;
}
#choose {
float: right;
}
#choose_details {
width: 307px;
height: 350px;
}
/*crew styles*/
#crew {
border-bottom: 1px solid #e7e7e7;
height: 1030px;
background-color: #fff;
}
#crew h2 {
margin: 94px auto 25px;
text-align: center;
font: 42px/52px ExtraLight;
}
#crew p {
margin: 0 auto;
width: 720px;
text-align: center;
font: 18px/28px ExtraLight;
opacity: .7;
}
#crew div {
display: flex;
margin: 58px auto 0;
width: 1035px;
flex-flow: wrap;
}
#crew img {
display: block;
margin: 15px;
}
/*contacts styles*/
#contacts {
height: 700px;
background-color: #fff;
}
#contacts_wrap {
margin: 0 auto;
width: 970px;
}
#contacts form {
float: left;
margin-top: 70px;
border: 1px solid #e7e7e7;
border-radius: 5px;
width: 470px;
height: 560px;
}
#contacts_details {
padding-top: 153px;
margin-left: 600px;
}
#contacts h3 {
margin-top: 45px;
margin-bottom: 42px;
text-transform: uppercase;
text-align: center;
font: 600 16px/32px Light;
letter-spacing: 2px;
}
#contacts input {
display: block;
margin: 0 auto 30px;
border: 1px solid #d4d3d3;
padding: 20px;
width: 328px;
height: 28px;
}
#contacts textarea {
display: block;
margin: 0 auto 30px;
border: 1px solid #d4d3d3;
padding: 20px;
width: 328px;
height: 102px;
resize: none;/* 去掉文本框右下角的扩展拉伸三角标志*/
}
#contacts button {
display: block;
margin: 0 auto;
border: 0;
width: 368px;
height: 50px;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
background-color: #141414;
}
#contacts h2 {
padding-bottom: 32px;
font: 600 42px/52px ExtraLight;
}
#contacts p {
margin-bottom: 64px;
font: 16px/26px ExtraLight;
opacity: .7;
}
#contacts .img_details {
margin-bottom: 29px;
}
#contacts .img_details p {
display: inline;
white-space: pre;
font: 600 16px/26px Light;
opacity: 1;
}
#contacts img {
display: inline-block;
margin-right: 15px;
vertical-align: middle;
}
/*footer styles*/
footer {
height: 410px;
background-color: #000;
color: #fff;
}
#footer_wrap {
display: flex;
margin: 0 auto;
padding-top: 82px;
width: 1180px;
justify-content: space-between;
}
footer h3 {
margin-bottom: 26px;
letter-spacing: 3px;
text-transform: uppercase;
font: 600 14px/28px Light;
}
footer a {
font: 16px/46px ExtraLight;
opacity: .3;
color: #fff;
}
footer p {
margin-bottom: 39px;
width: 270px;
font: 18px/28px ExtraLight;
opacity: .4;
}
#share_link a {
margin-right: 24px;
display: inline-block;
opacity: 1;
}
总结：
实际动手做，远比想象的要复杂的多，这是我做完这份作业最深刻的感受，还好我心思还算缜密，也有这个耐性。
一开始写起来确实很慢，每天挤出来的两个小时仅仅够写一小块儿的结构和样式，不停的调整、测试，总感觉进度好慢呀，后来随着理解的加深，书写的熟练，慢慢一个晚上能写两个模块的结构和样式了。
现在感觉自己实现结构和样式没什么问题了，但是不是最优的实现方式仍待考量，这份代码里肯定还有不少问题存在，只是我目前还认识不到。另外在什么样的场景使用什么样的方式最合理，这是些经验性的东西，还需要在实践中去积累，或者去看别人好的编码去学习。
总之呢，一段完成，收获颇丰，接着开启下一段旅程！
