html实战
主要html源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>谢斌实战</title>
<link rel="stylesheet" type="text/css" href="image/reset.css">
<link rel="stylesheet" type="text/css" href="image/header.css">
<style type="text/css"> </style>
</head>
<body>
<div id="container">
<div id="header">
<img src="data:image/logo.jpg" alt="" id="logo">
<ul id="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
<li><a href="#">导航7</a></li>
</ul>
</div>
<img src="data:image/about_banner.jpg" id="banner">
<div id="main">
<div id="lside">
<div class="subtitle">
<img src="data:image/circle.gif" alt="triangle">
<h1>核心业务</h1>
<a href="#">MORE</a>
</div>
<div class="four">
<h2>电子商户类网站建设</h2>
<img src="data:image/eshop_service.jpg">
<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>
</ul>
</div>
<div class="four">
<h2>电子商户类网站建设</h2>
<img src="data:image/eshop_service.jpg">
<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>
</ul>
</div>
<div class="four">
<h2>电子商户类网站建设</h2>
<img src="data:image/eshop_service.jpg">
<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>
</ul>
</div>
<div class="four">
<h2>电子商户类网站建设</h2>
<img src="data:image/eshop_service.jpg">
<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>
</ul>
</div>
</div>
<div id="rside">
<div class="subtitle">
<img src="data:image/circle.gif" alt="triangle">
<h1>文章观点</h1>
<a href="#">MORE</a>
</div>
<ul id="art">
<li><a href="#">这是一篇好文章1</a></li>
<li><a href="#">这是一篇好文章2</a></li>
<li><a href="#">这是一篇好文章3</a></li>
<li><a href="#">这是一篇好文章4</a></li>
<li><a href="#">这是一篇好文章5</a></li>
</ul>
<div class="subtitle">
<img src="data:image/circle.gif" alt="triangle">
<h1>联系我们</h1>
<a href="#">MORE</a>
</div>
<div id="contact"></div>
</div>
<div class="clr"></div>
</div>
<div id="footer">
<ul>
<li><a href="#">联系我们1</a></li>
<li><a href="#">联系我们2</a></li>
<li><a href="#">联系我们3</a></li>
<li><a href="#">联系我们4</a></li>
<li><a href="#">联系我们5</a></li>
<li><a href="#">联系我们6</a></li>
<li><a href="#">联系我们7</a></li>
</ul>
<address>©:2006-2018 福建福州市国通星驿科技网络有限公司 copyright http://www.xiebin.com</address>
</div>
</div>
</body>
</html>
主要cSS：
.clr {
clear:both;
width:0px;
height: 0px;
}
#container{
margin:0 auto;
width:1002px;
}
#header{
height:128px;
background: gray url(top_bg.jpg);
background-repeat:no-repeat;
}
#nav li {
width:90px;
margin-right: 1px;
float:left;
}
#nav a {
font-size:16px;
line-height: 37px;
font-family:'微软雅黑';
color:#363636;
display:block;
width:90px;
height:37px;
text-align:center;
}
#nav a:hover{
color:white;
background: url(nav_on.gif);
}
#banner{
margin: 6px 0;
}
#main{
}
#lside{
height:482px;
width:694px;
border: 1px solid #EEE;
border-top:none;
/*background:blue;*/
float:left;
}
.subtitle{
height:37px;
background:gray url(index_main_top_bg.gif);
}
.subtitle img{
margin:5px 0px 0px 10px;
float: left;
}
.subtitle h1{
float:left;
margin-left:10px;
font-size:16px;
line-height: 37px;
font-family:'Microsoft Yahei',SimHei;
}
.subtitle a{
font-size:12px;
line-height: 37px;
color:gray;
float:right;
}
.four{
width:326px;
height:200px;
background:#EEEEEE;
margin:10px;
float:left;
}
.four img{
float:left;
margin-left:10px;
padding:6px;
background:white;
}
.four ul{
float:left;
margin-left:10px;
}
.four li{
background: url(service_intro_bg.gif) no-repeat;
padding-left:10px;
height:20px;
}
.four a{
color:gray;
}
.four a:visited{
color:gray;
}
.four a:hover{
color:orange;
}
.four h2{
margin:6px 0px 6px 10px;
font-size:16px;
font-family:'Microsoft Yahei',SimHei;
}
#rside{
height:482px;
width:294px;
float:right;
}
#art{
background:#EEE;
margin-top:1px;
padding-top:10px;
}
#art a{
display: block;
line-height: 29px;
height:29px;
/*padding-top:5px;*/
padding-left: 30px;
background: url(article_head.gif) no-repeat;
}
#art a:hover{
background: url(article_on_bg.gif);
}
#contact {
height:227px;
background: #EEE;
margin-top:1px;
}
#footer{
height:120px;
margin-top:15px
}
#footer ul{
height:40px;
padding-top:15px;
background:#EEE;
}
#footer li{
float:left;
padding-right:20px;
}
#footer address{
font-family:'微软雅黑',sans-serif;
}
转为收藏，供自己学习
html实战的更多相关文章
- SSH实战 · 唯唯乐购项目（上）
前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...
- GitHub实战系列汇总篇
基础: 1.GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9 http://www.cnblogs.com/dunitian/p/5034624.html 2.GitHub实战系 ...
- MySQL 系列（四）主从复制、备份恢复方案生产环境实战
第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...
- Asp.Net Core 项目实战之权限管理系统（4） 依赖注入、仓储、服务的多项目分层实现
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- 给缺少Python项目实战经验的人
我们在学习过程中最容易犯的一个错误就是:看的多动手的少,特别是对于一些项目的开发学习就更少了! 没有一个完整的项目开发过程,是不会对整个开发流程以及理论知识有牢固的认知的,对于怎样将所学的理论知识应用 ...
- asp.net core 实战之 redis 负载均衡和"高可用"实现
1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的"高可用"实现, 呵呵双引号的"高可用"并不是 ...
- Linux实战教学笔记08:Linux 文件的属性（上半部分）
第八节 Linux 文件的属性(上半部分) 标签(空格分隔):Linux实战教学笔记 第1章 Linux中的文件 1.1 文件属性概述(ls -lhi) linux里一切皆文件 Linux系统中的文件 ...
- Linux实战教学笔记07:Linux系统目录结构介绍
第七节 Linux系统目录结构介绍 标签(空格分隔):Linux实战教学笔记 第1章 前言 windows目录结构 C:\windows D:\Program Files E:\你懂的\精品 F:\你 ...
- Linux实战教学笔记06:Linux系统基础优化
第六节 Linux系统基础优化 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 基础环境 第2章 使用网易163镜像做yum源 默认国外的yum源速度很慢,所以换成国内的. 第一步:先备份 ...
- Linux实战教学笔记05:远程SSH连接服务与基本排错(新手扫盲篇)
第五节 远程SSH连接服务与基本排错 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 远程连接LInux系统管理 1.1 为什么要远程连接Linux系统 在实际的工作场景中,虚拟机界面或物理 ...
随机推荐
- LODOP一个任务多列，只打一列如何维护
打印维护是针对整个任务进行维护的,打印多少个打印项就要维护多少个打印项,维护了多少打印项,就要打印多少内容.但是打印的时候不需要打印其他列,可以把其他列的数值传入空置,add_print_text纯文 ...
- 【tensorflow基础】Tensorpack-API
安装 pip install tensorpack 使用 参考 1. Tensorpack: 2. Tensorpack,一个基于TensorFlow的神经网络训练界面,源码包含很多示例: 完
- 扩展Redis的Jedis客户端，哨兵模式读请求走Slave集群
原 扩展Redis的Jedis客户端,哨兵模式读请求走Slave集群 2018年12月06日 14:26:45 温故而知新666 阅读数 897 版权声明:本文为博主原创文章,遵循CC 4.0 b ...
- GitLab - GitLab的备份与还原
1 - GitLab配置文件 GitLab默认的配置文件路径:/etc/gitlab/ /etc/gitlab/gitlab.rb:主配置文件,包含外部URL.仓库目录.备份目录等 /etc/gitl ...
- Lyrics of the song 99 Bottles of Beer
99 bottles of beer on the wall, 99 bottles of beer.Take one down and pass it around, 98 bottles of b ...
- controller进行数据保存以及作用域
controller进行数据保存以及作用域 一.request域 1.ModelAndView 在ModelAndView中进行存键值对,也可以进行跳转的地址存储,但是返回类型必须是ModelAndV ...
- C++容器简介1—stack
一.简介 stack是一种容器适配器(STL的容器分为顺序容器和关联容器,容器适配器),被设计来用于操作先进后出(FILO)结构的情景,在这种情况下, 元素的插入和删除都只能在容器的尾部进行. sta ...
- pycharm django使用技巧
- Django模板语言中静态文件路径的灵活写法
如图,我们看到的时html页面中静态文件的路径,其中/static/是settings.py中的设置: 假设我们将settings.py中的/static/改变了,这样的话我们还需要将html中的/s ...
- PMM--简介与部署
一.PMM架构 Percona Monitoring and Management是percona一款开源的用于管理和监控MySQL 和MongoDB性能的开源平台,通过PMM客户端收集到的DB监控数 ...