index.html(主页-结构)
<!DOCTYPE html>
<!-- 声明文档类型-->
<html lang="en">
<!-- 确定语言形态 -->
<head>
<meta charset="UTF-8">
<!--控制网页的编码格式 utf-8 国际性编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--控制视口比例以及缩放-->
<title>首页</title>
<!-- 先引入重置样式表和公共样式表以及主页样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<!-- 这个顺序引入更规范 -->
</head>
<body>
<!-- 这是网页的头部版心盒子 -->
<div class="header_con">
<!-- h1里面放logo哦 -->
<h1>
<img src="./images/logoyes_03.jpg" alt="">
</h1>
<!-- 头部右侧表单标签-->
<form action="">
<input type="text" class="search" value="SEARCH...">
<div>
<input type="button" class="btn">
</div>
</form>
</div>
<!-- 导航栏平铺部分：会显示黑色啦 -->
<div id="nav">
<!-- 导航栏版心部分 -->
<div class="nav_con">
<ul>
<li class="margin-left"><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
<li><a href="#">集团介绍</a></li>
</ul>
</div>
</div>
<!-- banner的平铺部分 -->
<div id="banner">
<div class="banner_con">
<!-- <img src="./images/banner1_02.jpg"> -->
</div>
</div>
<!-- 新闻列表的版心部分 -->
<div class="news_con">
<!-- 最左侧的盒子 -->
<div class="news_l">
<h3 class="news_title">公司新闻</h3>
<ul class="news_list">
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
<li>
<a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
<span>1998-09-15</span>
</li>
</ul>
</div>
<!-- 中间的盒子-->
<div class="news_c">
<h3 class="news_title">公司新闻</h3>
<p class="txt1">太有趣了，99%的人看了都会笑!快转发给你身边的朋友...</p>
<p class="txt2">太有趣了，99%的人看了都会笑!快转发给你身边的朋友...</p>
</div>
<!-- 右边的盒子 -->
<div class="news_r">
<h3 class="news_title">公司新闻</h3>
<p class="txt3">太有趣了，99%的人看了都会笑!快转发给你身边的朋友...</p>
<a href="#"><img src="./images/btn_img_05.jpg" alt=""></a>
</div>
</div>
<!-- 市场项目那一部分 -->
<div class="case_con">
<h3>市场项目</h3>
<div class="case_box">
<dl>
<dt><img src="./images/case1_05.jpg" alt=""></dt>
<dd>有一说一，这个点了，不会还有人在写作业吧</dd>
</dl>
<dl>
<dt><img src="./images/case1_05.jpg" alt=""></dt>
<dd>有一说一，这个点了，不会还有人在写作业吧</dd>
</dl>
<dl>
<dt><img src="./images/case1_05.jpg" alt=""></dt>
<dd>有一说一，这个点了，不会还有人在写作业吧</dd>
</dl>
<dl>
<dt><img src="./images/case1_05.jpg" alt=""></dt>
<dd>有一说一，这个点了，不会还有人在写作业吧</dd>
</dl>
</div>
</div>
<!-- 产品中心那一部分的平铺-->
<div id="links">
<!-- 这个顺序引入更规范 -->
<div class="links_con">
<!-- 版心部分 -->
<!-- 左边的盒子 -->
<div class="links_l">
<h3 class="links_title">产品中心</h3>
<ul class="links_list">
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了5</a>
</li>
<li>
<a href="#">快写完了5</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了5</a>
</li>
<li>
<a href="#">快写完了5</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
</ul>
</div>
<!-- 中间的盒子 -->
<div class="links_c">
<h3 class="links_title">产品中心</h3>
<ul class="links_list">
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
<li>
<a href="#">快写完了1</a>
</li>
</ul>
</div>
<!-- 右边的盒子 -->
<div class="links_r">
<h3 class="links_title">营销网络</h3>
<div class="map">
<img src="./images/chicken1_09.jpg">
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer_con">
<!-- 页脚左边的盒子 -->
<p class="footer_l">
<a href="#">点个赞吧</a>
<a href="#">点个赞吧</a>
<a href="#">点个赞吧</a>
<a href="#" class="footer-right">点个赞吧</a>
</p>
<!-- 页脚右边的盒子 -->
<p class="footer_r">
我尽力注释了，给小小白看的容易，给自己更深刻咯
</p>
</div>
</body>
</html>CSS代码：reset.css+public.css+index.css
1.reset.css
@charset "utf-8";
/* 重置样式表 */
* {
margin: 0;
padding: 0;
}
/* 统一页面文本 */
body {
font-size: 16px;
font-family: "微软雅黑";
}
/* 清除列表符号 */
ul,
ol,
li {
list-style: none;
}
/* 清除下划线 */
u,
a {
text-decoration: none;
}
/* 清除倾斜 */
i,
em {
font-style: normal;
}
/* 清除加粗 */
b,
strong {
font-weight: normal;
}
/* 清除文本默认大小和加粗 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 16px;
font-weight: normal;
}
/* 边框清零 */
img {
border: none;
}
/* 清除聚焦时候的边框 */
input {
outline: none;
}2.public.css
@charset "utf-8";
/* 公共区域版心宽度一样，左右居中 */
/* .header-wrap {
width: 1100px;
height: 62px;
margin: 0 auto;
} */
.header_con {
width: 1002px;
height: 100px;
/* background: pink; */
/* 左右居中 */
margin: 0 auto;
}
.header_con h1 {
width: 604px;
height: 66px;
/* background: orange; */
float: left;
padding: 34px 0 0 20px;
}
.header_con form {
width: 227px;
height: 61px;
/* background: orangered; */
float: right;
padding-top: 39px;
padding-right: 21px;
}
.header_con .search {
width: 195px;
height: 26px;
background: #f1f1f1;
border: 1px solid #e5e5e5;
/* 清除右侧边框 */
border-right: none;
float: left;
color: #888888;
}
.header_con .btn {
width: 30px;
height: 26px;
border: none;
background: #f1f1f1 url("../images/search_03.jpg") no-repeat center;
}
.header_con form div {
width: 30px;
height: 26px;
border: 1px solid #e5e5e5;
border-left: none;
float: left;
/* 给btn套盒子的时候也要加浮动 */
}
#nav {
height: 58px;
background: black;
}
#nav .nav_con {
width: 1002px;
height: 58px;
background: black;
margin: 0 auto;
}
/* 导航横向排列 */
#nav .nav_con li {
width: 118px;
height: 58px;
float: left;
background: black;
/* 左右居中 */
text-align: center;
/* 上下居中 */
line-height: 58px;
border-left: 1px solid #4a4a4a;
font-size: 12px;
}
.nav_con li a {
color: white;
}
.margin-left {
margin-left: 25px;
border-left: none!important;
}
/* 公共样式的footer */
.footer_con {
height: 82px;
/* background: #cccccc; */
}
.footer_con .footer_l {
height: 58px;
float: left;
/* background: red; */
padding-top: 24px;
}
.footer_con .footer_l a {
font-size: 12px;
float: left;
color: #868686;
border-right: 1px solid #868686;
/* padding:字体和边框的距离哈 */
padding: 0 7px;
padding-left: 15px;
}
.footer_con .footer_l .footer-right {
border-right: none!important;
}
.footer_con .footer_r {
height: 57px;
color: #8a8a8a;
font-size: 12px;
padding-top: 25px;
/* background: pink; */
padding-right: 21px;
float: right;
}3.index.css
@charset "utf-8";
/* 统一板块宽度和左右居中 */
.banner_con,
.news_con,
.case_con,
.links_con,
.footer_con {
width: 1002px;
margin: 0 auto;
}
#banner {
height: 465px;
background: gray url("../images/banner1_02_02.jpg") no-repeat center;
}
#banner .banner_con {
height: 465px;
/* background: pink; */
margin: 0 auto;
}
.news_con {
height: 243px;
background: white;
}
.news_title {
/* background: cadetblue; */
font-size: 18px;
color: #3f434f;
line-height: 18px;
padding-top: 36px;
}
.news_list {
/* background: cornflowerblue; */
margin-top: 23px;
}
.news_list li {
width: 437px;
height: 25px;
background: url("../images/ico_05.jpg") no-repeat left;
padding-left: 14px;
/* margin-top: 23px;不能给li加哦 要给他爹，不然每个儿子顶部都会空出来*/
}
.news_list li a {
float: left;
font-size: 12px;
color: #565656;
line-height: 25px;
}
.news_list li span {
float: right;
color: #9a9a9a;
font-size: 12px;
}
.news_l {
width: 480px;
height: 243px;
/* background: rebeccapurple; */
float: left;
padding-left: 21px;
}
.news_c {
width: 194px;
height: 243px;
background: #f1f1f1;
float: left;
padding: 0 27px 0 20px;
}
.news_c .txt1 {
font-size: 12px;
color: #555555;
line-height: 25px;
margin-top: 34px;
/* 行高自己去量哦 */
}
.news_c .txt2 {
font-size: 12px;
color: #979797;
line-height: 25px;
margin-top: 15 px;
/* 行高自己去量哦 */
}
.news_r {
width: 180px;
height: 243px;
background: #fbfbfb url("../images/ma_05.jpg") no-repeat right bottom;
float: left;
padding: 0 38px 0 24px;
}
.news_r .txt3 {
font-size: 12px;
color: #585858;
line-height: 24px;
margin: 21px 0 22px 0;
}
.case_con {
height: 304px;
/* background: goldenrod; */
}
.case_con h3 {
font-size: 18px;
color: #3f434f;
/* background: pink; */
padding: 28px 0 18px 22px;
}
.case_con .case_box {
height: 240px;
/* background: orange; */
}
.case_box dl {
width: 210px;
/* 这是由图片尺寸为210得出的，这样文本就会屈居于一处 */
/* background: burlywood; */
float: left;
margin: 0 20px;
}
/* 这里很重要！一定要设置宽高，也就是图片尺寸得出，这样以后图片更换，结构就不会乱！ */
.case_box dl dt {
width: 210px;
height: 136px;
}
.case_box dl dd {
font-size: 12px;
color: #4f4f4f;
line-height: 24px;
margin-top: 13px;
}
/* 上面给dt这个容器指定了宽高，现在让img跟随这个容器的宽高！！ */
.case_box dl dt img {
width: 100%;
height: 100%;
}
#links {
background: #e5e5e5;
}
.links_con {
height: 250px;
/* */
}
.links_con .links_title {
color: #5d5d5d;
line-height: 16px;
border-bottom: 1px solid #c1c1c1;
padding: 31px 0 11px 13px;
}
.links_con .links_l {
width: 452px;
height: 250px;
background: #e5e5e5;
float: left;
margin-left: 20px;
}
.links_con .links_list {
/* background: cornsilk; */
height: 170px;
padding-left: 5px;
padding-top: 15px;
}
.links_con .links_list li {
width: 136px;
height: 24px;
background: url("../images/btn_img_13.jpg") no-repeat left center;
font-size: 12px;
line-height: 24px;
padding-left: 13px;
float: left;
}
.links_con .links_list li a {
color: #5f5f5f;
}
.links_con .links_c {
width: 153px;
height: 250px;
background: #e5e5e5;
float: left;
margin: 0 50px;
}
.links_con .links_c .links_list li {
width: 130px;
}
.links_con .links_r {
width: 256px;
height: 250px;
background: #e5e5e5;
float: left;
}
.links_con .links_r .map {
text-align: center;
padding-top: 11px;
}
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
