收藏
批改状态：未批改
老师批语：
代码实现了企业官网的首页，有导航栏，联系信息，主体内容，尾部的链接等。使用了float,列表。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./css/reset.css"> <link rel="stylesheet" type="text/css" href="./css/common.css"> <link rel="stylesheet" type="text/css" href="./css/index.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>shopping</title> </head> <body> <!-- header --> <div class="header"> <div class="tape"> <div class="info"> <p class="left">欢迎访问某某安防消防工程有限公司~</p> <p class="right">咨询电话：020-22043297</p> </div> </div> <div class="info"> <div class="logo"> <img src="img/logo.png" alt=""> </div> <div class="search"> <input type="text" name="search" value="" placeholder="关键词"> <button>搜索</button> </div> </div> <!-- menu --> <div class="menu"> <div class="info"> <ul> <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> <li><a href="">人才招聘</a></li> </ul> </div> </div> </div> <!-- banner --> <div class="banner"> <img src="./img/banner.jpg" alt="banner"> <div class="line"></div> </div> <!-- product --> <div class="product"> <div class="title"> <h2>产品<img src="img/proicon.png" alt="">中心</h2> <p>局域网远程、外网远程、手机远程、让监控 无处不在</p> </div> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <br> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> <ul> <li> <a href=""><img src="./img/product.jpg"></a> <a href="#">产品应用案例</a> </li> </ul> </div> <!-- ad --> <div class="ads-imag"></div> <!-- what we do --> <div class="make"> <img src="./img/make.png" alt=""> <div class="refer"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button type="button" name="button">了解更多</button> </div> </div> <hr size="1" color="grey"> <!-- news --> <div class="news"> <div class="left"> <img src="./img/news.jpg" alt=""> </div> <div class="right"> <ul> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="#">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="#">中科院院士王教授来本公司</a> <p>中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="#">本公司通过国家科技部高新</a> <p>本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="#">某某公司新版网站全新改版</a> <p>某某公司新版网站全新改版</p> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <div class="top"> <ul> <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> <li><a href="">爱奇艺</a></li> </ul> </div> <div class="bottom"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css/reset.css
html {
overflow-x: auto;
overflow-x: hidden;
}
body,h1,h2,h3,ul,li,p {
margin: 0;
padding: 0;
font-family: 'Arial';
color: #505050;
}
p,li,a {
font-size: 14px;
}
ul,li {
list-style-type: none;
}
a:link,a:visited,a:active {
color: #505050;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #ff000;
}点击 "运行实例" 按钮查看在线实例
css/common.css
.header {
width: 100%;
height: 170px;
}
.header .tape {
height: 28px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info {
width: 1140px;
margin: auto;
overflow: hidden;
}
.header .tape .info .left{
float: left;
}
.header .tape .info .right{
float: right;
}
.header .info .logo {
width: 440px;
height: 88px;
float: left;
}
.header .info .search {
float: right;
height: 88px;
margin-right: 100px;
margin-top: 10px;
}
.header .info .search input {
width: 210px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.header .info .search button{
width: 45px;
height: 32px;
background-color: coral;
border: none;
color: white;
margin-left: -30px;
}
.header .menu {
width: 100%;
height: 50px;
background-color: black;
}
.header .menu ul li {
float: left;
line-height: 50px;
padding: 0 40px;
}
.header .menu ul li a{
color: #fff;
font-size: 1.1em;
}
.header .menu ul li:hover{
background-color: coral;
cursor: pointer;
}
.footer .top {
width: 100%;
height: 40px;
background-color: #3e3e3e;
margin: auto;
}
.footer .top ul {
width: 1140px;
margin: auto;
}
.footer .top li {
float: left;
}
.footer .top li a {
height: 100%;
padding: 0 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
.footer .bottom {
width: 100%;
height: 92px;
background-color: black;
text-align: center;
}
.footer .bottom p {
color: #fff;
line-height: 92px;
}点击 "运行实例" 按钮查看在线实例
css/index.css
.banner {
border: 1px solid red;
}
.banner img {
width: 100%;
height: 452px;
vertical-align:top;
}
.banner .line {
height: 30px;
background-color: #696969;
opacity: 0.4;
margin-top: -30px;
}
.product {
width: 1140px;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
overflow: hidden;
}
.product .title {
text-align: center;
background-image: url(../img/title_bg.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.product .title img {
padding: 0 5px;
}
.product li {
width: 260px;
height: 282px;
text-align: center;
float: left;
margin: 10px;
}
.product li img {
width: 260px;
height: 197px;
margin-bottom: 10px;
}
.product li img:hover {
opacity: 0.8;
}
.ads-imag {
width: 100%;
height: 412px;
background-image: url("../img/ads.jpg");
background-repeat: no-repeat;
margin-bottom: 50px;
}
.make {
width: 1140px;
margin: auto;
margin-bottom: 50px;
}
.make img {
width: 286px;
height: 177px;
float: left;
margin-right: 50px;
}
.make .refer p {
line-height: 2em;
}
.make .refer button {
width: 130px;
height: 34px;
border: none;
background-color: grey;
color: #fff;
}
.make .refer button:hover {
background-color: coral;
cursor: pointer;
}
.news {
width: 1140px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
overflow: hidden;
}
.news .left {
float: left;
}
.news .left img {
width: 500px;
height: 315px;
}
.news .right {
overflow: hidden;
}
.news .right ul {
margin-left: 50px;
}
.news .right ul li {
height: 80px;
}
.news .right li span {
float: left;
width: 60px;
height: 58px;
background-color: black;
margin-right: 30px;
}
.news .right li span * {
color: #fff;
text-align: center;
}点击 "运行实例" 按钮查看在线实例
通过实战，了解了float在导航栏中的应用。设计网站时，从整体的布局出发，先大后小，将网站逐步分解，最后意义实现。
margin：auto margin-left ,right 属性在页面中的大量运用。还需要多熟悉
效果
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
