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系统 在实际的工作场景中,虚拟机界面或物理 ...
随机推荐
- [LeetCode]577. Employee Bonus 员工奖金
Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...
- radio和checkbox的js勾选使用
Html: <table> <tr><th class="w1">党内职务</th><td colspan="3&q ...
- windows 安装node.js
安装node.js 这里我们是直接下载的编译后的zip包 地址:https://nodejs.org/en/download/ 点击下载相应的zip版本 这里我把zip包最里面一层的东西,所有内容放在 ...
- leetcode 55 Jump Game 三种方法，回溯、动态规划、贪心
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- matlab调试时子函数断点不起作用
matlab调试代码时总是遇到这样一个奇怪的问题,就是当我在主程序(.m脚本)中调用子函数并在子函数中设置断点,然后开始调试运行主程序... 发现主程序直接运行到结束而并没有在调用子函数的时候在所设置 ...
- TemplateDoesNotExist
路径问题,可能是没有配置这一行:
- ubuntu sh脚本激活conda 虚拟环境
第一步:初始化coda 命令:sudo gedit ~/.bashrc 第二部:复制其中这样一段代码 # >>> conda initialize >>> # !! ...
- python基础 — 循环重新输入
后续完善各种循环案例 while True: try: str_num = input('input a number:') num = float(str_num) print("你输入的 ...
- day31——recv工作原理、高大上版解决粘包方式、基于UDP协议的socket通信
day31 recv工作原理 源码解释: Receive up to buffersize bytes from the socket. 接收来自socket缓冲区的字节数据, For the opt ...
- Fully Convolutional Networks for Semantic Segmentation 译文
Fully Convolutional Networks for Semantic Segmentation 译文 Abstract Convolutional networks are powe ...