html css网页代码，源码附上
html编写一个化妆品的网页，在这里的网页代码，我以做了较为精细的计算，每个盒子的尺寸基本链接紧密
·
网页图片在这里
<!DOCTYPE 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>化妆品专区-----MAC</title>
<style>
/* body的高度是1000px */
body
{
background-image: url(images/背景1.jpeg);
/* background-color: aqua; */
background-repeat: repeat-y;
background-attachment:fixed;
background-position: center;
background-size: 1500px 700px;
}
#title
{
width: 1000px;
height: 60px;
/* background-color:blue; */
margin: 10px auto;
}
#title p
{
color: rgb(53, 161, 161);
font-size: 24px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
line-height: 60px;
}
#title img
{
width: 100px;
height: 60px;
float: left;
}
#top
{
width: 1000px;
height: 380px;
background-color: rgb(156, 205, 239);
margin: 10px auto 0px auto;
}
#nav
{
width: 1000px;
height: 50px;
background-color: aliceblue;
margin: 10px auto;
}
#list
{
width: 1000px;
height: 40px;
/* background-color: aquamarine; */
margin:0 auto;
/* padding-top: 10px; */
padding-left: 2px;
line-height: 40px;
}
#list a
{
display:inline-block;
height: 40px;
line-height: 40px;
width: 80px;
color: rgb(43, 116, 226);
/* height: 50px; */
/* background-color: rgb(232, 214, 214); */
font-size: 20px;
margin-left:5px;
margin-right: 10.5px;
text-align: center;
text-decoration: none;
}
#list a:hover
{
background-color: rgb(141, 215, 225);
color: rgb(199, 76, 240)
}
#show
{
width: 1000px;
height: 310px;
/* margin: 10px auto; */
}
#show img
{
width: 1000px;
height: 330px;
/* text-align: center;
line-height: 300px; */
/* margin:10px 10px 10px 10px; */
}
#center
{
width: 1000px;
height: 500px;
/* background-color: blueviolet; */
margin:auto;
padding:1px;
}
#tp
{
width: 320px;
height:500px ;
float: left;
}
#text
{
width: 300px;
height: 210px;
background-color:rgb(246, 243, 243);
/* margin: 10px; */
padding: 10px 0px 0px 0px;
}
#text p
{
margin-bottom: 10px;
margin-left: 8px;
}
/* #text table
{
width: 290px;
height: 150px;
margin:5px 5px 5px 5px;
}
#text ul li
{
list-style:none;
} */
#left
{
width: 320px;
height: 290px;
/* background-color:brown; */
margin: 10px 0px 0px 0px;
}
#left img
{
width: 300px; /*图片撑满盒子，没有空隙*/
height: 270px;
/* margin: 5px; */
}
#main
{
width: 676px;
height: 476px;
/* background-color: rgb(0, 255, 64); */
float:right;
margin: 10px 0px 0px 0;
padding: 1px 0px 10px 0px;
border:0.5px dashed rgb(16, 15, 15); /*虚线框*/
}
#main-box
{
width: 650px;
height: 455px;
background-color: rgb(246, 243, 243);
margin:5px 10px 5px 15px;
}
#main-box h3
{
text-align: center;
}
#main-box h4
{
color: rgb(97, 90, 241);
}
#bottom
{
width: 1000px;
height: 80px;
background-color: rgb(167, 164, 164);
margin: 10px auto;
}
#bottom p
{
text-align: center;
}
</style>
</head>
<body>
<div id="title">
<img src="images/ysl2(1).png" alt="口红图标">
<p>极致完美，无懈可击</p>
</div>
<div id="top">
<!-- /*导航栏*/ -->
<div id="nav">
<div id="list">
<a href="#">产品了解</a>
<a href="#">公司历史</a>
<a href="#">品牌类型</a>
<a href="#">主营专场</a>
<a href="#">研发团队</a>
<a href="#">消费反馈</a>
<a href="#">区域代言</a>
<a href="#">销售热区</a>
<a href="#">时尚前端</a>
<a href="#">售后服务</a>
</div>
</div>
<div id="show">
<img src="images/纪梵希.jpeg" alt="口红集合">
</div>
</div>
<div id="center">
<div id="tp">
<div id="text">
<p>网站名称：美妆专场网站</p>
<hr>
<p>主营专场：口红，香水，粉底液等</p>
<hr>
<p>品牌加盟：香奈儿，MAC，雅诗兰黛等</p>
<hr>
<p>网站备案：Website.index.html</p>
<hr>
</div>
<div id="left">
<img src="images/美妆.jpeg" alt="美妆图片">
</div>
</div>
<div id="main">
<div id="main-box">
<h3>基本说明</h3>
<h4>成分表</h4>
<p>
二异硬脂醇苹果酸酯、氢化聚癸烯、C20-24 烷基聚二甲基硅氧烷、合成蜡、聚丁烯、
辛基十二醇、霍霍巴酯类、乙烯/丙烯共聚物、红33色淀(CI17200铝色淀)、VP/十六
碳烯共聚物、双-山嵛醇/异硬脂醇/植物甾醇二聚亚油醇二聚亚油酸酯、聚甲基硅
倍半氧烷、聚甘油-3、红7色淀 (CI15850钙色淀)、二硬脂二甲铵锂蒙脱石、生育酚
乙酸酯、CI 77891、PEG-30 二聚羟基硬脂酸酯、CI 77491、碳酸丙二醇酯、向日葵
(HELIANTHUS ANNUUS)籽蜡、绿荆树(ACACIA DECURRENS)花蜡、黄5色淀(CI19140
铝色淀)、聚乙二醇-8、香精、CI 77499、蓝1色淀(CI42090铝色淀)、生育酚(维生素E)
、氧化铝、抗坏血酸棕榈酸酯、硅石、
抗坏血酸(维生素C)、柠檬酸
</p>
<h4>品牌故事</h4>
<p>
香奈儿（Chanel）是法国奢侈品品牌，由可可·香奈儿（Coco Chanel，
原名Gabrielle Bonheur Chanel ，中文名加布里埃·香奈儿）于1910年在法国创立，
拥有时尚精品及配饰、香水彩妆及护
肤品以及腕表/ 高级珠宝三个大类的产品。1910年，香奈儿在康朋街21号开设了配
饰店，她相继推出帽子、礼服与便装。1914年，香奈儿开设了两家时装店，品牌“C
hanel”宣告正式诞生。1924年，香奈儿推出了第一个化妆品系列。1978年，香奈儿
推出首个成衣系列。
</p>
</div>
</div>
</div>
<div id="bottom">
<!-- 脚注内容 -->
<p>
版权所有者： 刘宇 kingsndo
</p>
<p>
转载注明原文出处，合作请联系QQ并备注来意：3216741755
</p>
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
17
0- 0
已为社区贡献1条内容
所有评论(0)