HTML+CSS做一个漂亮的网页 - 好文

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta
http-equiv="X-UA-Compatible" content="IE=edge"> <title>test9-11</title> <meta
name="viewport" content="width=device-width, initial-scale=1"> <link
rel="stylesheet" type="text/css" media="screen" href="test9-11.css" /> </head>
<body> <header> <div> <div id="title">Hello World</div> <div id="titlebottom">
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. </div> <div id="login">
<div>CREATE YOUR ACCOUNT</div> <div>IT IS ABSOLUTELY FREE</div> <div> <input
type="text" placeholder="[email protected]"> <input type="password"
placeholder="Create your password"> <input type="submit" value="SIGN UP">
</div> </div> </div> </header> <section> <div id="landingpage"> <div>BOATLOADS
OF AWESOME</div> <div>Ready-made, customizable, HTML <br>landing page
sections</div> <div id="moblie"> <div> <img
src="image9-11/image_0001s_0001s_0000s_0000_Iphone-Icon.png" /> <h1>Mobile
First</h1> <p>This scenario might have seemed more likely in the universe
imagined by Aristotle and Ptolemy.</p> </div> <div> <img
src="image9-11/image_0001s_0001s_0002s_0001_Check-Icon.png" />
<h1>Accessibility</h1> <p>Today they estimate as many as 500 billion billion
sunlike stars, with 100 billion billion Earthlike planets. </p> </div> <div>
<img src="image9-11/image_0001s_0001s_0001s_0000_Pencil-Icon.png" /> <h1>Fluid
Typography</h1> <p>The more we learn about the universe, the more absurd it
would seem if all but one of those bodies were bereft of life.</p> </div> <div>
<img src="image9-11/image_0001s_0001s_0003s_0000_Settings-Icon.png" />
<h1>Customization</h1> <p>Maybe humanity is still so basic and primitive that
advanced civilizations don’t think we’re worth talking to. </p> </div> </div>
</div> </section> <section id="third"> <div id="supportive"> <div>Supportive
policies for China's smart car</div> <div> Fermi wasn’t the first person to ask
a variant of this question about alien intelligence. But he owns it. The query
is known around the world as the Fermi paradox. It’s typically summarized like
this: If the universe is unfathomably large, the probability of intelligent
alien life seems almost certain. </div> <button>CHECK OUR FEATURES</button>
<button>TRY PRODUCT FOR FREE</button> </div> <div id="picture"> <img
src="image9-11/image_0002s_0002s_0002_Screen.png" /> </div> <div style="clear:
both;"></div> </section> <section> <div id="products"> <div>Try Our Awesome
Products</div> <div id="prointroduction"> <div> <img
src="image9-11/image_0003s_0001s_0000s_0000_Singleton.png" /> <p>One of the
most important steps in maintaining your personal brand is to stay consistent.
Anytime you do anything online, you should consider how it contributes to your
personal brand, said Matt Brady, founder and former CEO of career consultancy
Path2Hired. </p> </div> <div> <img
src="image9-11/image_0003s_0001s_0001s_0000_Hero.png" /> <p>This means that
every time you write an article, post an update on social media or interact
with your audience, you should think about the overall message you're trying to
convey. Keeping your brand consistent helps you build a strong brand that
others will begin to recognize, Brady said.</p> </div> <div> <img
src="image9-11/image_0003s_0001s_0002s_0000_Portland.png" /> <p>This means that
you should identify whether your personal brand will include facets of your
personal life — which can further humanize your brand voice — or if you should
keep your personal and professional worlds separate, Jones said.</p> </div>
</div> </div> </section> <section> <div id="learn"> <div> <img
src="image9-11/image_0004s_0000s_0000s_0000_图层-3.png" /> <div> <p>Learn How To
Improve Your Personal Business</p> <p>A strong brand is essential if you want
to succeed in business, but it's also important to have a polished personal
brand. Your personal brand should be a genuine, honest culmination of who you
are. </p> </div> </div> <div style="clear: both;"></div> <div> <div> <p>Choose
Between Two Beautifully Designed Color Schemes</p> <p>You're likely on several
different social media platforms for both personal and professional uses. But
because you use different platforms for different things, it's important for
you to be aware of your privacy settings.</p> </div> <img
src="image9-11/image_0004s_0001s_0000s_0000_图层-4.png" /> </div> </div>
</section> <section> <div id="crew"> <div>Our Awesome Crew</div> <div>Our
unique online teaching style makes learning easy for everyone.Whether you are
trying to land a new job, brush up on your skills.</div> <div id="crewphoto">
<img src="image9-11/image_0005s_0001s_0000s_0002_张思远大.png" /> <img
src="image9-11/image_0005s_0001s_0001s_0000_2.png" /> <img
src="image9-11/image_0005s_0001s_0002s_0000_3.png" /> <img
src="image9-11/image_0005s_0001s_0003s_0000_沈大师大_meitu_3.png" /> </div> </div>
</section> <section id="contacts"> <div> <div> <div id="fell">FELL FREE TO
WRITE US</div> <input type="email" id="email" placeholder="E-mail" /> <input
type="text" id="subject" placeholder="Subject" /> <input type="text"
id="message" placeholder="Message" /> <input type="submit" id="send"
value="SEND" /> </div> <div> <div id="con"> <p>Contacts</p> <p>Make any design
your own using the Style <br/>Editor.Personalize fonts, colors, and layouts to
<br/>create the custom look you want.</p> <p> <img
src="image9-11/image_0006s_0001s_0002s_0000_Map-Icon.png" />360 King Street
<br/>Feastrvale Trevose, PA 19057</p> <p> <img
src="image9-11/image_0006s_0001s_0001s_0000_Phone-Icon.png"
/>(755)564-84-12</p> <p> <img
src="image9-11/image_0006s_0001s_0000s_0000_Mail-Icon.png"
/>[email protected]</p> </div> </div> </div> </section> <footer> <div> <div>
<p>LEARN MORE</p> <p>How it works?</p> <p>Meeting tools</p> <p>Live
streaming</p> <p>Contact Method</p> </div> <div> <p>ABOUT US</p> <P>About
us</P> <p>Features</p> <p>Privacy police</p> <p>Terms & Conditions</p> </div>
<div> <p>SUPPORT</p> <p>FAQ</p> <p>Contact us</p> <p>Live chat</p> <p>Phone
call</p> </div> <div> <p>ENJOY YOUR LIFE</p> <p>Create web UI kit for
designers, <br/>freelancers or business.</p> <p></p> <p id="icon"> <img
src="image9-11/image_0007s_0001s_0000s_0000_Twitter-Icon.png" />   <img
src="image9-11/image_0007s_0001s_0000s_0001_Facebook-Icon.png" />   <img
src="image9-11/image_0007s_0001s_0000s_0002_Google-Icon.png" />   <img
src="image9-11/image_0007s_0001s_0000s_0003_Tumbler-Icon.png" />   <img
src="image9-11/image_0007s_0001s_0000s_0004_Pinterest-Icon.png" />   <img
src="image9-11/image_0007s_0001s_0000s_0005_LinkedIn-Icon.png" /> </p> </div>
</div> </footer> </body> </html>body { font-family: "Microsoft Yahei",
sans-serif; font-weight: lighter; } header { background-image:
url(image9-11/image_0000s_0002s_0002_图层-1.png); color: white; width: 1600px;
height: 990px; text-align: center; margin: 0 auto; } #title { display:
inline-block; font-size: 64px; padding-top: 200px; width: 960px; } #titlebottom
{ display: inline-block; box-sizing: border-box; width: 960px; font-size: 24px;
padding: 70px 70px 100px 70px; } #login { display: inline-block; border: 1px
solid white; width: 960px; height: 240px; } #login div:first-child { font-size:
20px; transform: scale(1.2, 1); padding-top: 60px; padding-bottom: 15px; }
#login div:nth-child(2) { font-size: 1em; transform: scale(1.2, 1); color:
rgb(90, 90, 90); } #login div input:first-child { width: 300px; height: 50px;
border: none; } #login div input:nth-child(2) { width: 300px; height: 50px;
border: none; } #login div input:nth-child(3) { width: 120px; height: 50px;
background-color: #000000; color: #ffffff; border: none; } section { width:
1600px; margin: 0 auto; border-bottom: 1px solid rgb(200, 200, 200); }
#landingpage { width: 1170px; height: 700px; margin: 0 auto; text-align:
center; } #landingpage div { display: inline-block; }
#landingpage>div:first-child { width: 1170px; height: 15px; font-size: 15px;
margin-top: 85px; } #landingpage>div:nth-child(2) { width: 1170px; height:
170px; font-size: 48px; margin-top: 40px; } #landingpage>div:nth-child(3) {
width: 1170px; height: 450px; } #moblie div { width: 420px; height: 120px; }
#moblie div img { float: left; } #third { background-image:
url(image9-11/image_0000s_0002s_0002_图层-1.png); } #supportive { width: 500px;
height: 430px; margin: 180px 0 180px 320px; float: left; color: #ffffff; }
#supportive div:first-child { font-size: 32px; width: 370px; } #supportive
div:nth-child(2) { width: 370px; margin-top: 40px; } #supportive
button:nth-child(3) { width: 240px; height: 50px; font-size: 12px; margin-top:
60px; background-color: #ffffff; color: #000; border: none; } #picture { width:
650px; height: 600px; float: right; display: table-cell; vertical-align:
middle; margin-top: 100px; border-top: 1px solid rgb(200, 200, 200);
border-bottom: 1px solid rgb(200, 200, 200); border-left: 1px solid rgb(200,
200, 200); } #picture img { width: 600px; height: 550px; } #supportive
button:nth-child(4) { width: 240px; height: 50px; font-size: 12px; margin-top:
60px; background-color: #000000; color: #ffffff; border: none; } #products {
width: 960px; height: 580px; margin: 0 auto; } #products>div:first-child {
font-size: 48px; text-align: center; margin: 90px auto 80px auto; }
#prointroduction { display: flex; justify-content: space-between; }
#prointroduction div { width: 260px; height: 280px; } #prointroduction img {
display: table-cell; text-align: center; } #learn { width: 960px; height:
1000px; margin: 0 auto; } #learn div div:first-child { float: left; width:
320px; height: 240px; margin-top: 150px; } #learn div div:nth-child(2) { float:
right; width: 320px; height: 240px; margin-top: 180px; } #learn img { width:
570px; height: 350px; } #learn img:first-child { float: left; margin-top:
110px; } #learn img:nth-child(2) { float: right; margin-top: 80px; } #learn
p:first-child { font: 24px bold; } #crew { width: 960px; height: 1080px;
margin: 0 auto; text-align: center; } #crew div:first-child { font-size: 48px;
margin-top: 100px; } #crew div:nth-child(2) { margin-top: 30px; width: 700px;
margin: 0 auto; } #crewphoto { width: 960px; height: 710px; margin-top: 70px;
display: flex; flex-wrap: wrap; justify-content: space-between; align-content:
space-between; } #crewphoto img { width: 470px; height: 350px; } #contacts {
width: 1600px; height: 700px; margin: 0 auto; } #contacts>div { width: 960px;
height: 700px; margin: 0 auto; display: flex; justify-content: space-between; }
#contacts>div>div { width: 470px; height: 560px; margin-top: 70px; }
#contacts>div>div:first-child { border: 1px solid rgb(200, 200, 200);
border-radius: 10px; } #contacts input { width: 370px; border-radius: 5px;
border: 1px solid rgb(200, 200, 200); } #fell { text-align: center;
vertical-align: middle; width: 370px; height: 110px; line-height: 110px;
margin: 0 auto; font-weight: 400; } #email { height: 50px; margin-left: 50px; }
#subject { height: 50px; margin-top: 30px; margin-left: 50px; } #message {
margin-top: 30px; margin-left: 50px; height: 140px; } #send { height: 50px;
margin-top: 30px; margin-left: 50px; background-color: #000000; color: #ffffff;
} #con { text-align: left; width: 360px; height: 370px; margin-top: 80px;
margin-left: 90px; } #con p:first-child { font-size: 48px; } footer { width:
1600px; height: 400px; background-color: black; margin: 0 auto; color: rgb(90,
90, 90); font-size: 15px; } footer>div { width: 1200px; height: 310px; display:
flex; justify-content: space-around; margin: 0 auto; padding-top: 90px; }
footer div div { width: 150px; height: 200px; } footer div div:last-child {
width: 270px; height: 200px; } footer div div p:first-child { color: #ffffff; }

热门工具换一换