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系统 在实际的工作场景中,虚拟机界面或物理 ...
随机推荐
- 【tensorflow基础】tensorflow中 tf.reduce_mean函数
参考 1. tensorflow中 tf.reduce_mean函数: 完
- [LeetCode] 235. Lowest Common Ancestor of a Binary Search Tree 二叉搜索树的最近公共祖先
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- [LeetCode] 280. Wiggle Sort 摆动排序
Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...
- RSA 系统找不到指定的文件
未测试 System.Security.Cryptography.RSACryptoServiceProvider rsa = new RSACryptoServiceProvider(); 改为 C ...
- C1128节数超过对象文件格式限制: 请使用 /bigobj 进行编译
今天debug C++项目是遇到 解决方案: 右键项目—>属性 输入 /bigobj 再次编译问题解决
- 关于Excel 2016 总要点击两次才能打开的解决方法
1.快捷键:win+r,输入:regedit2.定位到如下项目“HKEY_CLASSES_ROOT\Excel.Sheet.12\shell\Open\command”:3.编辑原有的内容,在最后添加 ...
- C++全排列 next_permutation
全排列函数 next_permutation 这是C++的STL中专门用来排列的函数(可以自动处理存在重复数据集的排列问题) 使用时要加上头文件 #include <algorithm> ...
- [CMD] Jenkins上执行robot命令如果出现fail不往下走其他的CMD命令了
需要在后面加上||exit 0 robot -o %disSection%.xml --include %disSection% -v ENV:%envBmk% .||exit 0
- Java开发笔记（一百一十）GET方式的HTTP调用
所谓术业有专攻,一个程序单靠自身难以吃成大胖子,要想让程序变得血肉丰满,势必令其与外界多加交流,汲取天地之精华,方能练就盖世功夫.那么程序应当如何与外部网络进行通信呢?计算机网络的通信标准主要采取TC ...
- java笔记2—函数
函数: 1.什么是函数? 函数是定义在类中具有特定功能的一段独立小程序. 函数也称方法. 2.函数的格式: [ 修饰符 ] 返回值类型 函数名(参数类型 形式参数) ...