0328实战-企业站点布局16：35 - 作业

首页 > 博客列表 > 0328实战-企业站点布局16：35

博主信息

博文 34

粉丝 0

访问量 28247

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

0328实战-企业站点布局16：35

丝丝心动的博客

原创

607人浏览过

通过几天对css的学习以及作业的完成，我对css的认识有了很大的提高，网站页面漂不漂亮，在很大程度上取决于css的成功与否，现在我能写一些css代码来改变页面元素的样式了。

0328实战-企业站点布局的主页代码：

<!DOCTYPE html>
<html>
<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">
 <title>首页</title>
</head>
<body>
 <!-- 公共头部 -->
 <div>
  <!-- 小条 -->
  <div>
    <div>
   <p>欢迎访问某某安防消防工程有限公司~</p>
   <p>咨询电话：020-22043297</p></div>
     </div>     <div>
    <div><img src="images/logo.png" alt=""></div>
    <div>
   <input type="text" name="name" placeholder="关键字">
   <button >搜索</button>
    </div>
     </div>
     <!-- 导航 -->
     <div>
      <div>
     <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>
     <img src="images/banner.jpg" alt="图片">
     <div></div>
    </div>
    <!-- 产品列表 -->
    <div>
     <!-- 标题部分 -->
     <div>
      <h2>产品<img src="images/proicon.png" alt="">中心 </h2>
      <p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
     </div>
     <!-- 产品列表 -->
     <ul>
      <li>
       <a href=""><img src="images/product.jpg" alt=""></a>
       <a href="">产品应用案例</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">产品应用案例</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">产品应用案例</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">产品应用案例</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">我们的名称</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">>我们的名称</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">>我们的名称</a>
      </li>
      <li>
       <a href=""></a><img src="images/product.jpg" alt="">
       <a href="">>我们的名称</a>
      </li>
     </ul>
    </div>
    <!-- 广告 -->
    <div></div>
    <!-- 我们是做什么的 -->
    <div>
     <img src="images/make.png" alt="">
     <div>
      <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p>
      <button type="button">了解更多</button> 
     </div> 
    </div>
<hr color="#efefef" size="1">
 <!-- 新闻列表 -->
 <div>
  <div>
   <img src="images/news.jpg" alt="">
  </div>
  <div>
   <ul>
    <li>
     <span><h1>25</h1><p>2012-02</p></span><a href="">本公司参加第八十届广州商</a>
     <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
    </li><li>
     <span><h1>25</h1><p>2012-02</p></span><a href="">中科院院士王教授来本公司</a>
     <p>中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p>
    </li><li>
     <span><h1>25</h1><p>2012-02</p></span><a href="">本公司通过国家科技部高新</a>
     <p>本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p>
    </li><li>
     <span><h1>25</h1><p>2012-02</p></span><a href="">某某公司新版网站全新改版</a>
     <p>某某公司新版网站全新改版成功某某公司新版网站全新改版成功某某公司新版网站全新改版成功</p>
    </li>
   </ul>
   
  </div> 
 </div>
    <!-- 公共底部 -->
 <div>
  <div>
   <ul>     
    <li><a href="">支付宝</a></li>
    <li><a href="">阿里云</a></li>
    <li><a href="">腾讯QQ</a></li>
    <li><a href="">百度搜索</a></li>
    <li><a href="">同福信息科技</a></li>
    <li><a href="">网博士</a></li>
    <li><a href="">phpweb</a></li>
    <li><a href="">weboss</a></li>
    <li><a href="">草莓互联</a></li>
   </ul>
  </div>
  <div>
   <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
  </div>
  
 </div>
</body>
</html>

0328实战-企业站点布局的主页公共样式（公共样式主要是指页面头部和底部）代码（有详细的注释）：

/*公共样式表*/
/*公共头部样式表*/
.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;
 /*BFC:块级格式化上下文;包住浮动子元素*/
 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-top: 10px;
 /*右边距*/
 margin-right: 100px;
}
.header .info .search input{
 /*宽度*/
 width: 200px;
 /*高度*/
 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: -40px;
 
}
/*头部菜单:导航*/
.header .menu{
 /*宽度*/
 width: 100%;
 /*高度*/
 height: 50px;
 /*背景：黑*/
 background-color: black;
}
.header .menu ul li{
 /*左浮动*/
 float: left;
 /*行高等于父块：水平居中*/
 line-height: 50px;
 /*内边距上下：0左右40px*/
 padding: 0 40px;
}
.header .menu ul li a{
 /*鼠标移上时字体变大*/
 font-size: 1.1em;
 /*该前景色要设置在a标签上。设置在li上是没有效果的*/
 color: #fff;
}
.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: white;
 /*行高*/
 line-height: 92px;
}

0328实战-企业站点布局的主页重置样式（重置样式主要是指整个页面的页面布局样式）代码（有详细的注释）：

/*样式重置*/
html{
 /*垂直滚动条开启*/
 overflow-y: auto;
 /*水平滚动条关闭*/
 overflow-x:hidden;
}
/*块元素*/
body, h1,h2,h3, ul,li,p{
 /*清掉外边距内边距*/
 margin: 0;
 padding: 0;
 /*字体设置：微软的雅黑*/
 font-family: 'microsoft yehei',Verdana,Arial;
 /*当前文本颜色：灰色*/
 color: #505050;
}
/*非可替换标签*/
p,li,a{
 /*字体大小*/
 font-size: 14px;
}
ul ,li{
 /*清除列表基本样式*/
 list-style-type: none;
}
/*a标签的基本样式；被访问过的样子；鼠标单击下去的样子*/
a:link,a:visited,a:active{
 /*文本颜色*/
 /*深灰色*/
 color: #505050;
 /*去掉默认修饰*/
 text-decoration: none;
}
a:hover{
 /*鼠标悬停效果*/
 /*去掉下划线*/
 text-decoration: none;
 /*前景色：红色*/
 /*color: red;*/
 /*十六进制*/
 /*color: #ff0000;*/
 /*两两相等可以简写*/
 color: #f00;
}

0328实战-企业站点布局的主页专用样式（专用样式主要是指首页的页面布局样式）代码（有详细的注释）：

/*首页专用的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: 30px auto;
    /*去浮动*/
    overflow: hidden;
}
.product .title{
 /*文本居中*/
 text-align: center;
 /*在样式表中引用images文件下的图片*/
 background-image: url(../images/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: 10px;
}
.product li img:hover{
 opacity: 0.8;
}
.ads-img{
 /*宽度*/
 width: 100%;
 /*高度*/
 height:412px;
 /*在样式表中引用images文件下的图片*/
 background-image: url(../images/ads.jpg);
    /*去背景重复*/
    background-repeat: no-repeat;
    /*背景定位*/
    background-position: 0 0;
    /*下边距*/
    margin-bottom:50px;
}
/*我们做什么*/
.make{
 /*宽度*/
 width:1140px;
 /*资源水平居中 */
 margin: auto;
 /*下边距*/
 margin-bottom: 50px;
}
.make img{
 /*宽度*/
 width: 286px;
 /*高度*/
 height: 177px;
 /*左浮动*/
 float: left;
    /*右边距*/
    margin-right: 50px;
}
.refer p{
 /*行高28px*/
 line-height: 2em;
}
.refer button{
    /*宽度*/
 width: 130px;
 /*高度*/
 height: 30px;
 /*背景色*/
 background-color: gray;
 /*去边框*/
 border: none;
 /*前景色*/
 color: white;

}
.refer button:hover{
 /*背景色*/
 background-color: coral;
  /*鼠标移上时（按钮）变小手*/
 cursor: pointer;
}
/*新闻列表*/
.news{
 /*宽度*/
 width: 1140px;
 /*高度*/
 height:;
 /*水平居中 */
 margin: auto;
 /*上下边距*/
 margin-bottom:50px ;
 margin-top: 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;
 /*下边框*/
 border-bottom: 1px dotted #333;
 /*下边距*/
 margin-bottom: 20px;
}
.news .right li span{
 /*高度*/
 height: 58px;
 /*宽度*/
 width: 60px;
 /*左浮动*/
    float: left;
    /*背景*/
    background-color: black;
     /*右边距*/
    margin-right: 50px; 
}
.news .right li span *{
 /*前景色*/
    color: white;
    /*文本居中*/
    text-align: center;
}
.news .right ul li a{
 /*下边距*/
 margin-bottom: 5px;
 /*鼠标移上字体变1.2倍*/
 font-size: 1.2em;
}
.news .right ul li a：hover{
 /*鼠标移上变色*/
 background-color: coral;
    /*鼠标移上变小手*/
    cursor: pointer;
}

0328实战-企业站点布局的首页效果展示：

总结：通过这次实战的完成，通过几天对css的学习以及作业的完成，我对css的认识有了很大的提高，网站页面漂不漂亮，在很大程度上取决于css的成功与否，现在我能写一些css代码来改变页面元素的样式了。几天学习下来，让我对学会做网站更有信心。

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0315作业

2019-10-30 16:44:16