论如何熟悉HTML与css的方法-孰能生巧第二步：今天你微笑了么编写（详细代码）
HTML代码
效果图：
主页
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>joketitle>
<link rel="stylesheet" href="../css/style01.css">
head>
<body>
<div class="red-page1 center_page">
<div class="wz-top">
<div class="wz-left"><img src="../img/left-word01.png">div>
<div class="wz-right">
<ul class="ul0">
<li><a href="#">HOMEa>li>
<li><a href="#">FEATURESa>li>
<li><a href="#">DOWNLOADa>li>
<li><a href="#">BLOGa>li>
<li><a href="#">CONTACTa>li>
ul>
div>
div>
<div class="wz-bottom">
<div class="big-left">
<div class="bigword">CHOCOLATE
PUDDING DESSERT
JELLYdiv>
<div class="smallword">Fruitcake donut gummies. Candy liquorice biscuit. Sugar plum jelly gummi bears
brownie toffee cupcake caramels brownie cookie.div>
<div class="phone">
<div class="sj"><img src="../img/photo/Shape1.png">div>
<div class="sjwz">DOWNLOAD ON APPSTOREdiv>
div>
div>
<div class="rt-phone"><img src="../img/photo/1.png" alt="">div>
div>
div>
<div class="white-page2 center_page">
<div class="tit">
APP FEATURES
div>
<div class="txt01">
Donut sesame snaps donut pie dessert chupa chups wafer dragée. Gummies fruitcake chupa chups cookie
liquorice. Chocolate pudding dessert jelly fruitcake tart jelly wafer. Sweet roll carrot cake croissant.
div>
<div class="three">
<div class="tpone"><img src="../img/photo/Layer4.png">div>
<div class="tptwo"><img src="../img/photo/Layer3.png">div>
<div class="tpthree"><img src="../img/photo/Layer2.png">div>
div>
<div class="threewz">
<div class="tponewz">SCALABLEdiv>
<div class="tptwowz">INSTANTdiv>
<div class="tpthreewz">SOMETHINGdiv>
div>
<div class="bottom-wz">
<div class="tponewz01">Croissant ice cream macaroon cake. Dessert jelly beans candy cookie. Bear claw candy
canes gingerbread caramels cake. Macaroon applicake gummi bears jelly marzipan.div>
<div class="tptwowz02">Croissant ice cream macaroon cake. Dessert jelly beans candy cookie. Bear claw candy
canes gingerbread caramels cake. Macaroon applicake gummi bears jelly marzipan.div>
<div class="tpthreewz03">Croissant ice cream macaroon cake. Dessert jelly beans candy cookie. Bear claw
candy canes gingerbread caramels cake. Macaroon applicake gummi bears jelly marzipan.div>
div>
div>
<div class="joke-page center_page">
<div class="joke"><img src="../img/photo/joke.png">div>
<div class="joke_left">
<div class="joke-wz">
HOCOLATE PUDDING
DESSERT JELLY FRUIT
CAKE TART JELLY WAFER.
div>
<div class="jk-wz">
Donut cupcake lemon drops dragée liquorice apple pie powder. Topping sweet lollipop soufflé chocolate
liquorice candy canes.
div>
<div class="bot01">
<div class="jk-bot">
DOWNLOAD
div>
div>
div>
div>
<div class="last center_page">
<div class="lb">
<div class="lb_title">
<img src="../img/left-word01.png">
div>
<div class="lb_comment">
<div class="last_left comment_li_box">
<div class="last-wz">Popular Postdiv>
<div class="tp-wz01">
<img src="../img/photo/Rectangle16.png" width="55px" height="42px">
<div class="lt-rt">
I Love Donut
Bonbon Cackes
div>
div>
<div class="tp-wz01">
<img src="../img/photo/Rectangle16.png" width="55px" height="42px">
<div class="lt-rt">
I Love Donut
Bonbon Cackes
div>
div>
<div class="tp-wz01">
<img src="../img/photo/Rectangle16.png" width="55px" height="42px">
<div class="lt-rt">
I Love Donut
Bonbon Cackes
div>
div>
div>
<div class="last_left comment_li_box">
<div class="last-wz">Popular Postdiv>
<div class="tp-wz">
<div class="lt-rt02-1">
SedLex
10 hours ago
div>
div>
<div class="tp-wz">
<div class="lt-rt03">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
div>
div>
<div class="tp-wz">
<div class="lt-rt04">
Follow us
div>
div>
div>
<div class="tp-wz comment_li_box">
<div class="about">
About
div>
<div class="la-wz">
Cheesecake tiramisu dragée gummies donut cotton candy ice cream I love halvah. Gummies croissant
I love gummies gummies. Marshmallow I love gummies sugar plum jelly-o pie.
div>
div>
div>
div>
div>
<div class="end-page center_page">
<div class="end-bottom">
<div class="end-wz">
copyright © thenewstep | www.thenewstep.cn |
div>
<div class="end-img">
<div><img src="../img/photo/facebook_32.png">div>
<div><img src="../img/photo/dribble_32.png">div>
<div> <img src="../img/photo/twitter_32.png">div>
div>
div>
div>
body>
html>
css代码
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: white;
}
.center_page{
margin:0 auto;
overflow: hidden;
}
.red-page1{
width: 1920px;
height: 849px;
/* float: left; */
background-image: url(../img/人物透明1.png);
background-repeat: no-repeat;
background-color: #d14b46;
}
.rw{
width: 1270px;
height: 425px;
}
.wz-top{
width: 1085px;
height: 100px;
margin: 46px 395px 0px 440px;
}
.wz-left{
float: left;
}
.ul0{
font-family: Montserrat-Regular;
font-size: 16px;
list-style:none;
float: right; ;
}
.ul0>li{
margin-top: 17px;
height: 34px;
margin-bottom: 25px;
font-weight: bold;
display: inline-block;
color: #ffffff;
margin-right: 22px;
}
.ul0>li:hover{
border-bottom: 3px solid white;
}
.wz-bottom{
width: 1137px;
height: 645px;
margin-left: 432px;
margin-top: 6px;
/* background-color: pink; */
}
.big-left{
width: 472px;
height: 160px;
float: left;
color: #ffffff;
}
.bigword{
font-family: Montserrat-Bold;
font-size: 52px;
}
.smallword{
font-family: HelveticaNeue-Thin;
font-size: 36px;
margin-top: 59px;
}
.phone{
width: 363px;
height: 70px;
margin-top: 13px;
background-image: url("../img/photo/Button.png");
}
.sj{
float: left;
margin: 14px 30px 13px 35px;
}
.sjwz{
float: left;
margin-top: 25px;
color: #ffffff;
}
.rt-phone img{
width: 500px;
margin-top: 106px;
margin-left: 165px;
}
.white-page2{
width: 1920px;
height: 849px;
/* float: left; */
/* background-color: #3747db; */
}
.tit{
font-family: Montserrat-Bold;
font-size: 52px;
margin: 86px 771px auto 749px;
color: #8a8a8a;
}
.txt01{
width: 841px;
height: 82px;
font-family: Helvetica-Light;
margin: 44px 550px auto 529px;
text-align: center;
font-size: 22px;
line-height: 32px;
letter-spacing: 0px;
color: #3a3a3a;
}
.three{
height: 182px;
/* background-color: aqua; */
margin: 66px 250px 36px 464px;
}
.three>img{
float: left;
}
.tpone{
float: left;
margin-right: 200px;
}
.tptwo{
float: left;
margin-right: 200px;
}
.tpthree{
float: left;
margin-right: 200px;
}
/* display: inline-block;
width: 248px;
height: 148px;
vertical-align: top; */
.threewz{
height: 19px;
width: 900px;
margin: 0 auto;
/* background: red; */
/* margin: 0px 484px auto 484px; */
/* height: 100px;
background-color: aqua; */
margin: 30px 484px auto 484px ;
}
.tponewz{
float: left;
margin-right: 100px;
margin-left: 30px;
}
.tptwowz{
float: left;
margin-left: 210px;
margin-right: 286px;
}
.tpthreewz{
float: left;
}
.bottom-wz{
text-align: center;
font-family: Helvetica-Light;
font-size: 18px;
line-height: 26px;
letter-spacing: 0px;
color: #646464;
/* background-color: aqua; */
margin: 50px 421px auto 421px;
}
.bottom-wz>div{
margin-right: 78px;
display: inline-block;
width: 277px;
vertical-align: top;
}
.joke-page{
width: 1920px;
height: 849px;
/* float: left; */
background-color: #d7dedc;
position: relative;
}
.joke{
width: 1281px;
height: 854px;
float: right;
}
.joke_left{
position: absolute;
top: 171px;
left: 420px;
height: 511px;
width: 712px;
/* background-color: #3747db; */
}
.joke-wz{
width: 634px;
height: 173px;
font-family: Montserrat-Bold;
font-size: 52px;
}
.jk-wz{
width: 415px;
height: 131px;
/* line-height: 36px; */
font-size: 24px;
margin-top: 54px;
line-height: 36px;
letter-spacing: 0px;
color: #585858;
}
.bot01{
width: 138px;
height: 49px;
margin-top: 73px;
margin-left: 38px;
background-image: url(../img/photo/Shape13.png);
}
.jk-bot{
font-family: Montserrat-Bold;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 41px;
letter-spacing: 0px;
color: #ffffff;
margin:20px 16px ;
}
.last{
width: 1920px;
height: 630px;
background-color: #2e2e38;
}
.lb{
margin: 0 auto;
margin-top: 120px;
width: 1066px;
height:375px;
/* background-color: #8a8a8a; */
}
.lb_title{
height: 55px;
width: 100%;
/* background-color: aquamarine; */
}
.lb_title img{
margin-left: 36px;
vertical-align: top;
}
.lb_comment{
width: 100%;
height: 258px;
margin-top: 62px;
/* background-color: burlywood; */
}
.comment_li_box{
height: 240px;
width: 280px;
float: left;
/* background-color: #3747db; */
}
/* .last_left{
width: 300px;
height: 339px;
background-color: #72d7e9;
} */
.last-wz{
width: 128px;
height: 19px;
font-family: Montserrat-Bold;
font-size: 20px;
letter-spacing: 0px;
color: #ffffff;
}
.tp-wz01{
margin-top: 17px;
margin-bottom: 10px;
}
.lt-rt{
float: right;
width: 117px;
height: 29px;
font-family: Montserrat-Regular;
font-size: 15px;
margin-right: 60px;
letter-spacing: 0px;
color: #ffffff;
}
.lt-rt02{
width: 74px;
height: 46px;
font-family: Montserrat-Bold;
font-size: 15px;
margin-top: 17PX;
letter-spacing: 0px;
color: #ffffff;
}
.lt-rt02-1{
width: 73PX;
height: 46PX;
font-family: Montserrat-Bold;
font-size: 15px;
margin-top: 17PX;
letter-spacing: 0px;
color: #ffffff;
}
.lt-rt03{
width: 222PX;
height: 52PX;
font-family: Montserrat-Bold;
font-size: 15px;
margin-top: 17PX;
letter-spacing: 0px;
color: #ffffff;
}
.lt-rt04{
width: 67px;
height: 11px;
font-family: Montserrat-Bold;
font-size: 14px;
margin-top: 25PX;
letter-spacing: 0px;
color: #ffffff;
}
.about{
width: 64px;
height: 16px;
font-family: Montserrat-Bold;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
.last_center{
width: 300px;
height: 339px;
margin-top: 40px;
float: left;
background-color: #3f646b;
}
.la-wz{
width: 263px;
height: 112px;
font-family: OpenSans-Italic;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
margin-top: 35px;
line-height: 20px;
letter-spacing: 0px;
color: #ffffff;
}
.end-page{
width: 1920px;
height: 108px;
background-color: #d7dedc;
}
.end-bottom{
width: 800px;
height: 50px;
/* background-color: #3f646b; */
margin: 46px 450px 34px 600px;
}
.end-wz{
float: left;
width: 565px;
height: 24px;
font-family: Helvetica;
font-size: 25px;
letter-spacing: 0px;
color: #000000;
}
.end-img{
float: right;
}
.end-img>div{
display: inline-block;
margin-right: 38px;
}
素材
