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系统 在实际的工作场景中,虚拟机界面或物理 ...
随机推荐
- C# .NET 支付宝IOT小程序AES密钥解密
实际测试 KEY 是 16个 byte,byte[] byteKEY = System.Convert.FromBase64String(key); 注意:是Convert.FromBase6 ...
- kali 扫描之burp Suite学习笔记1
1 安装 2 burs功能图解 3 工具栏详解 4 实战 (1) 网络配置 一台kali 一台msf 网络采用nat nat网络设置方法: 查看路由 配置文件 (2) 代理设置 bur代理设置 浏览器 ...
- Docker学习-安装，配置，运行
Docker继续学习 2019年12月15日23:15:36 第二次学习docker Docker三个重要概念: 镜像 就是一个模板(类似一个Java类) 容器 容器是用镜像创建的运行实例. 仓库 仓 ...
- postman上传文件对参数的contentType类型设置方式
项目中使用postman模拟上传文件接口时,总是不成功,发现content-type设置不对,设置head的contentType后,还是不行,后来无意中发现文件参数默认的content-type类型 ...
- [IOT] - Raspbian Buster 设置固定 IP
背景 Raspberry Pi 4 + Raspbian Buster 配置步骤 1. 打开文件 "/etc/dhcpcd.conf" 进行配置. 2. 有线网卡配置固定IP in ...
- Spring全家桶注解一览（精选）
废话 最近想整理一波Spring注解相关的文章,虽然写CURD就只涉及到那些常用的注解.但是笔者我也想去了解一下其他注解,丰富下自己的知识面(提升一下逼格!). 就想在网上搜了半天,好像大家的都差不多 ...
- Django学习之django自带的contentType表
Django学习之django自带的contentType表 通过django的contentType表来搞定一个表里面有多个外键的简单处理: 摘自:https://blog.csdn.net/aar ...
- Python进阶:程序界的垃圾分类回收
垃圾回收是 Python 自带的机制,用于自动释放不会再用到的内存空间: 什么是内存泄漏呢? 内存泄漏,并不是说你的内存出现了信息安全问题,被恶意程序利用了,而是指程序本身没有设计好,导致程序未能释放 ...
- Spring主要用到两种设计模式
Spring主要用到两种设计模式 1.工厂模式 Spring容器就是实例化和管理全部Bean的工厂. 工厂模式可以将Java对象的调用者从被调用者的实现逻辑中分离出来. 调用者只关心被调用者必须满足的 ...
- C#采集麦克风话筒声音
在项目中,我们会需要录制麦克风的声音.比如录制QQ聊天时自己说的话.那么如何采集呢?当然是采用SharpCapture!下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步:在引用了S ...