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系统 在实际的工作场景中,虚拟机界面或物理 ...
随机推荐
- 用Vue2.0实现简单的分页及跳转
用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- golang 基于channel封装资源池（可用于封装redis、mq连接池）
package pool import ( "errors" "io" "sync" "time" ) var ( Er ...
- 【Tools】HP/惠普v285w 量产工具
前段时间朋友说自己u盘坏了,让帮忙看看.看下图是这个u盘. 坏的问题:往里面复制东西,提示:请去掉写保护或使用另一张磁盘.但是能正常从里面读取出来数据. 无论更换电脑,还是使用网上的修改注册表等方式皆 ...
- Laravel 数据库实例教程 —— 使用查询构建器对数据库进行增删改查
原文地址:https://blog.csdn.net/lmy_love_/article/details/72832259 获取查询构建器很简单,还是要依赖DB门面,我们使用DB门面的table方法, ...
- 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2
1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...
- c++入门构造函数
一种方法: class Student{ public: //声明有默认参数的构造函数 Student(,,float=10); //声明成员函数 void total(); private: //声 ...
- Java开发笔记（一百三十九）JavaFX的输入框
循着Swing的旧例,JavaFX仍然提供了三种文本输入框,分别是单行输入框TextField.密码输入框PasswordField.多行输入框TextArea.这些输入框都由抽象类TextInput ...
- 面试官问你MySQL的优化，看这篇文章就够了
作者:zhangqh segmentfault.com/a/1190000012155267 一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单的示例 ...
- 2019秋季PAT甲级_C++题解
2019 秋季 PAT (Advanced Level) C++题解 考试拿到了满分但受考场状态和知识水平所限可能方法不够简洁,此处保留记录,仍需多加学习.备考总结(笔记目录)在这里 7-1 Fore ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...