CSS.06 -- 尚合网页模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*css初始化*/
body,div,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,input{
margin:0;
padding: 0;
font:12px simsun;
}
img{
border: 0 none;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0 none;
outline-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear:both;
}
.clearfix{
zoom: 1;
}
/*头部开始*/
.header{
width: 980px;
height: 39px;
margin: 20px auto 0px;
}
.logo{
width: 179px;
height: 39px;
}
.search{
width: 195px;
height: 30px;
border:1px solid #ECECEC;
}
.search input[type="text"]{
width: 165px;
height: 30px;
vertical-align: top; }
.search input[type="button"]{
width: 30px;
height: 30px;
vertical-align: top;
background: url("images/search2.jpg"); }
.nav{
height: 55px;
background: url("images/nav_bg.png");
border-top:1px solid #bbb;
}
.nav-con{
width: 980px;
height: 55px;
margin: 0 auto;
}
.nav-con li{
float: left;
}
.nav-con li a{
display: inline-block;
/* height: 55px; */
font: 700 12px/55px 宋体;
color:#000;
padding:0 30px;
background: url("images/nav_bg-line.png") no-repeat right;
}
.nav-con li a:hover{
color:#7cb609;
}
/*头部结束*/
/*banner部分开始*/
.banner{
width: 980px;
height: 597px;
margin: 0 auto;
}
.mes{
height: 32px;
background: #FBFBFB;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
margin-bottom: 15px; }
.mes-con{
width: 980px;
height: 32px;
margin:0 auto;
}
.mes-con-l{
height: 32px;
line-height: 32px;
}
.mes-con-r{
height: 16px;
margin-top: 8px;
}
/*banner 部分结束*/
/*新闻开始*/
.news{
width: 980px;
margin: 15px auto; }
.news-left,.news-cen,.news-right{
border:1px solid #E4E4E4;
height: 224px;
}
/*新闻左边盒子开始*/
.news-left{
width: 310px;
position: relative; }
.news-cen{
width: 373px;
margin-left:12px;
}
.news-right{
width: 268px;
}
.pro{
margin: 14px 0 0 6px;
color:#7AB800;
}
.pro img{
vertical-align: middle;
}
.pro-pic{
position: absolute;
left:55px;
top:45px;
}
.sj-l{
position: absolute;
left:23px;
bottom:90px;
}
.sj-r{
position: absolute;
right:23px;
bottom:90px;
}
/*新闻中间盒子*/
.news-cen ul{
margin:10px 17px 0; }
.news-cen ul li{
height: 27px;
line-height: 27px;
border-bottom: 1px dashed #DCDCDC;
}
.news-cen ul li a{
color:#000;
}
.news-cen ul li a.sorry{
color:#ff0000;
font-weight: 700; }
/*新闻右边盒子*/
.tec{
margin: 10px 0 30px 28px; }
.tec li{
height: 12px;
border-left: 3px solid #7AB800;
margin-top:10px;
line-height: 12px;
padding-left:5px;
}
.news-right p{
margin-left:28px;
line-height: 18px;
}
/*新闻右边盒子结束*/
/*底部开始*/
.footer{
height: 280px;
background: #2D2D2D;
border-bottom: 1px dashed #414141; }
.footer-con{
width: 980px;
margin: 0 auto;
}
.footer-con dl{
float: left;
margin-top:20px;
margin-right:40px;
}
.footer-con dl dt{
color:#c0c0c0;
}
.footer-con dl dd{
color:#707070;
margin-top: 20px;
}
.bot{
background: #2D2D2D;
height: 54px;
text-align: center;
padding-top:30px;
} </style>
</head>
<body>
<!-- .header>.logo>img[src="data:images/logo.jpg"]+^.search>input[type="text"]+input[type="button"] -->
<!-- 头部部分开始 -->
<div class="header">
<div class="logo fl"><img src="data:images/logo.jpg" alt=""></div>
<div class="search fr">
<input type="text" value="请输入..."><input type="button"></div>
</div>
<div class="nav">
<div class="nav-con">
<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>
</ul>
</div>
</div>
<!-- 头部部分结束 -->
<!-- banner部分开始 -->
<div class="banner">
<img src="data:images/banner.jpg" alt="">
</div>
<!-- banner部分结束 -->
<!-- 信息部分开始 -->
<div class="mes">
<div class="mes-con">
<div class="mes-con-l fl">最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网</div>
<div class="mes-con-r fr">
<img src="data:images/zone.png" alt="">
<img src="data:images/weibo.png" alt="">
<img src="data:images/xinlang.png" alt="">
<img src="data:images/renren.png" alt=""></div>
</div>
</div>
<!-- 新闻部分开始 -->
<div class="news clearfix">
<!-- 新闻左盒子 -->
<div class="news-left fl">
<div class="pro">
<img src="data:images/o.jpg" alt="">
新品发布
</div>
<div class="pro-pic"><img src="data:images/home_hot_01.png" alt=""></div>
<div class="sj-l"><img src="data:images/left.png" alt=""></div>
<div class="sj-r"><img src="data:images/right.png" alt=""></div>
</div>
<!-- 新闻左盒子结束 -->
<!-- 新闻中间盒子 -->
<div class="news-cen fl">
<div class="pro">
<img src="data:images/o.jpg" alt="">
新闻中心
</div>
<ul>
<li><a href="#" class="sorry">致歉公告</a></li>
<li><a href="#">首批尚合Aonet已全部售馨!</a></li>
<li><a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a></li>
<li><a href="#">尚合Aone智能手机入网证已经获工信部门审批下发.</a></li>
<li><a href="#">我司通过ISO9001:2008国际质量管理体系认证</a></li>
<li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>
</ul>
</div>
<!-- 新闻中间盒子结束-->
<!-- 新闻右边盒子开始 -->
<div class="news-right fr">
<div class="pro">
<img src="data:images/o.jpg" alt="">
技术与支持
</div>
<div class="tec">
<ul>
<li>售后服务</li>
<li>投诉与建议</li>
<li>联保网点</li>
<li>常见问题FAQ</li>
</ul>
</div>
<p>深圳市汇聚众合科技发展有限公司<br>
服务热线：400-633-7922</p>
</div>
<!-- 新闻右边盒子结束 -->
</div>
<!-- 新闻部分结束 -->
<!-- 底部开始 -->
<div class="footer">
<div class="footer-con">
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
<dl>
<dt>尚合首页</dt>
<dd>返回首页</dd>
</dl>
</div>
</div>
<div class="bot">深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市<br>
会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司</div>
</body>
</html>
CSS.06 -- 尚合网页模拟的更多相关文章
- 引用CSS文件到html网页里方法
引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- 【转】C# winform 加载网页 模拟键盘输入自动接入访问网络
[转]C# winform 加载网页 模拟键盘输入自动接入访问网络 声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html ...
- H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- C# winform 加载网页 模拟键盘输入自动接入访问网络
声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html 转载请注明出处. 背景: 由于所在办公室网络限制,笔者每天都使用网络 ...
- CSS之fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- 【css系列】创建网页加载进度条
一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...
随机推荐
- 笔记之《用python写网络爬虫》
1 .3 背景调研 robots. txt Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站 ...
- 读书笔记 effective c++ Item 1 将c++视为一个语言联邦
Item 1 将c++视为一个语言联邦 如今的c++已经是一个多重泛型变成语言.支持过程化,面向对象,函数式,泛型和元编程的组合.这种强大使得c++无可匹敌,却也带来了一些问题.所有“合适的”规则看上 ...
- Orcale 之基本术语二
表空间 表空间是 Orcale 数据库最大的逻辑结构.表空间就是一个或者多个数据文件的集合.所有的数据文件都被逻辑的存放在表空间中. 一个数据库包括 SYSTEM.SYSAUX和TMP三个默认表空间, ...
- 详解 swift2.2 和 OC 的混编
前言: 我们在一些情况下,仅仅使用swift 是无法完成一个项目的,在swift项目中必要用到 OC 实现一些功能,比如,项目要使用一些第三方的框架,但这个第三方的框架却是用 OC 实现的,或者你的项 ...
- 5天2亿活跃用户，QQ“LBS+AR”天降红包活动后台揭密
作者:Dovejbwang,腾讯后台开发工程师,参与“LBS+AR”天降红包项目,其所在“2016春节红包联合项目团队”获得2016公司级业务突破奖. 商业转载请联系腾讯WeTest获得授权,非商业转 ...
- 微信小程序开发之http到https的转化
小程序从公布到现在已经过去好几个月了,本来从小程序发布出来就准备抱着微信的大腿进行一波小程序开发的,但是由于公司项目小程序暂时不支持,也就只能一直搁浅.过年过来偶然和朋友谈起小程序,觉的工作再忙也得找 ...
- DFS 分布式文件系统 选型笔记
需求按优先级顺序如下: 1)存放3TB以上中小型文件,图片为主,平均在500~700k,一般在1M以内. 2)要集群化,支持负载均衡,高可用高性能.有大企业使用背书最好. 3)提供Java程序上传文件 ...
- angular ng-repeat数组中的数组
//先定义一个数组anular代码: var app = angular.module('serApp', []); app.controller('indexCtrl', function($sco ...
- 从源码解析TreeMap
上篇文章我们介绍了HashMap集合,这是一个键值对集合,可以高效的按照键查找数值.但是它有一个缺陷:数据如果是无序的可以是很高效的,但是如果数据需要排列有顺序就不适合了.本篇将要介绍的一个集合是树集 ...
- AlloyTouch之无限循环select插件
写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...