CSS3+CSS+HTML实现网页
2021-03-28 01:28
标签：color tle css height rem ESS arch imp mil 效果图： 代码实现： 样式部分style.css: 整体结构部分index.html: CSS3+CSS+HTML实现网页 标签：color tle css height rem ESS arch imp mil 原文地址：https://www.cnblogs.com/kaoju/p/12623847.html
*{
margin: 0;
padding: 0;
}
body{
background-color: #673929;
font-size: 16px;
font-family: "微软雅黑"
}
#conters{
margin: 0 auto;
width: 900px;
}
#header{
height: 220px;
margin-bottom: 5px;
position: relative;
}
#icon-list{
position: absolute;
top:170px;
right: 30px;
width: 130px;
height: 30px;
/*
font-size: 0;*/
}
#nav{
height: 30px;
background: #09c;
margin-bottom: 5px;
font:18px/30px 微软雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
#nav a{
text-decoration: none;
}
a:link{
color: white;
}
a:hover{
color: yellow;
}
a:visited{
color: white;
}
a:active{
color: purple;
}
#main{
background-color: red;
/* margin-bottom: 5px;*/
}
#aside{
width: 300px;
float: left;
background: #6cf;
text-align: center;
font-size: 14px;
color: #000;
}
#aside h2{
color: black;
text-align: center;
margin-top: 2em;
letter-spacing: 1px;
}
#imglist{
width: 130px;
margin:0 auto;
}
.pol{
width: 170px;
padding: 10px;
background-color: #eee;
border:1px solid #bfbfbf;
box-shadow: 2px 2px 4px #aaa;
border-radius: 5px;
}
#imglist img{
width: 65px;
height: 75px;
margin:0 auto;
font-size: 0;
}
.rotate-left{
transform:rotate(7deg);
-webkit-transform-style: rotate(7deg);
-moz-transform-style: rotate(7deg);
-ms-transform-style: rotate(7deg);
transform-style: rotate(7deg);
}
.rotate-right{
transform:rotate(-7deg);
-webkit-transform-style: rotate(-7deg);
-moz-transform-style: rotate(-7deg);
-ms-transform-style: rotate(-7deg);
transform-style: rotate(-7deg);
}
#inglist img:hover{
-webkit-transform-style: scale(1.2);
-moz-transform-style: scale(1.2);
-ms-transform-style: scale(1.2);
transform-style: scale(1.2);
}
#aside th{
font-weight: 1px;
letter-spacing: 1px;
}
#aside table{
text-align: center;
padding: 10px;
}
#content{
width: 595px;
float: right;
background-color: #cff;
margin-bottom: 5px;
}
.subcon{
width: 570px;
margin:10px auto;
clear: both;
/* border:1px dashed #000;*/
}
.subcon img{
margin:5px;
padding: 5px;
float: left;
}
.subcon .suntext{
width: 60px;
float: left;
margin:5px;
}
.subcon h2{
margin:5px;
color: #673929;
}
.subcon p{
font:16px/2em;
}
#footer{
/* width: 900px;*/
height: 60px;
line-height: 60px;
background-color: #6cf;
clear: both;
margin-top: 5px;
text-align: center;
}
#fix{
position: fixed;
top: 100px;
left:5px;
}
#fix img{
height: 100px;
width: 100px;
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>咖啡店title>
link rel="stylesheet" href="css/style.css">
head>
body>
div id="conters">
div id="header">
p>img src="images/banner.jpg" >p>
div id="icon-list">
img src="images/1.bmp" alt="">
img src="images/2.bmp" alt="">
img src="images/3.bmp" alt="">
img src="images/4.bmp" alt="">
div>
div>
div id="nav">
a href="#">咖啡MENU|a>
a href="#">咖啡COOK|a>
a href="#">咖啡STORY|a>
a href="#">咖啡NEWS|a>
a href="#">咖啡PARTYa>
div>
div id="main">
div id="aside">
div id="menu">
h2>咖啡MENUh2>
table>
th>
tr>
td> td>
td>拿铁td>
td>卡不起落td>
td>摩卡td>
td>农博园td>
tr>
tr>td> td>
td>uiustd>
td>whdtd>
td>duhdtd>
td>dwhutd>
tr>
th>
tr>
td>大杯td>
td>45td>
td>35td>
td>35td>
td>35td>
tr>
tr>
td>中杯td>
td>25td>
td>25td>
td>25td>
td>25td>
tr>
tr>
td>小杯td>
td>15td>
td>15td>
td>15td>
td>15td>
tr>
table>
div id="imagelist">
div class="pol rotate-left">img src="images/Cappuccino.jpg" alt="">div>
div class="pol rotate-right">img src="images/Espresso.jpg" alt="">div>
div class="pol rotate-left">img src="images/Mocha.jpg" alt="">div>
div class="pol rotate-right">img src="images/Latte.jpg" alt="">div>
div>
div>
div class="box">
div>
div>
div>
div id="content">
div class="subcon">
img src="images/Cappuccino.jpg" alt="">
div class="subtext">
h2>咖啡名称h2>
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, blanditiis tenetur natus illum velit.p>
div>
div>
div class="subcon">
img src="images/Espresso.jpg" alt="">
div class="subtext">
h2>咖啡名称h2>
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, magni voluptatum illum tempore voluptatem iste.p>
div>
div>
div class="subcon">
img src="images/Latte.jpg" alt="">
div class="subtext">
h2>咖啡名称h2>
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae esse nisi, nulla, aliquid architecto molestias.p>
div>
div>
div class="subcon">
img src="images/Mocha.jpg" alt="">
div class="subtext">
h2>咖啡名称h2>
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestiae labore tenetur dolores ipsam dicta!p>
div>
div>
div class="subcon">
img src="images/Latte.jpg" alt="">
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla architecto quos possimus ratione deserunt, explicabo id odit eaque deleniti minus enim perferendis maiores impedit tempora eius sequi fuga quia.p>
div>
div>
div>
div id="footer">
p>我是页脚哇！！p>
div>
div>
div id="fix">
img src="images/Latte.jpg" alt="">
p>我是广告域哇p>
div>
body>
html>
上一篇：css/选择器
下一篇：C# Func与Action