<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉菜单演示</title>
<style type="text/css">
<!--
*{margin:0px; padding:0px;}
body {font-family: arial, 宋体, serif;font-size:12px;}
#nav {line-height: 24px; list-style-type: none; background:#666; }
#nav a {display: block; width: 80px; text-align:center;}
#nav a:link {color:#666; text-decoration:none;}
#nav a:visited {color:#666;text-decoration:none;}
#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#nav li {float: left; width: 80px; background:#CCC;}
#nav li a:hover{background:#999;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}
#nav li ul li{float: left;background: #F6F6F6;}
#nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
-->
</style>
[removed]<!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//-->[removed]
</head>
<body>
产品介绍一
产品一
2021-09-29 16:29:36
790KB
1
使用div+css实现小米官网首页内容，其中使用css3动画做了轮播图，以及鼠标悬停的动画效果，未涉及到js等逻辑内容，适合前端初期学习的小伙伴们参考借鉴
2021-09-28 14:44:19
1.66MB
1
第1部分 CSS基础知识篇
第1章 CSS的初步体验
1.1 CSS的概念
1.2 使用CSS控制页面
1.3 体验CSS
第2章 CSS的基本语法
2.1 CSS选择器
2.2 选择器声明
2.3 CSS的继承
第3章 用CSS设置丰富的文字效果
3.1 CSS文字样式
3.2 文字实例一：模拟Google公司Logo
3.3 文字实例二：制作页面的五彩标题
3.4 CSS段落文字
3.5 段落实例：百度搜索
第4章 用CSS设置图片效果
4.1 图片样式
4.2 图片的对齐
4.3 图文混排
4.4 图文实例：八仙过海
. 第5章 用CSS设置网页中的背景
5.1 背景颜色
5.2 背景图片
5.3 背景综合一：我的个人主页
5.4 背景综合二：古词《念奴娇·赤壁怀古》
第6章 用CSS设置表格与表单的样式
6.1 控制表格
6.2 表格实例一：隔行变色
6.3 表格实例二：鼠标经过时变色的表格
6.4 表格实例三：日历
6.5 CSS与表单
6.6 综合实例一：直接输入的Excel表格
6.7 综合实例二：模仿新浪网民调查问卷
第7章 用CSS设置页面和浏览器的元素
7.1 丰富的超链接特效
7.2 鼠标特效
7.3 页面滚动条
第8章 用CSS制作实用的菜单
8.1 项目列表
8.2 无需表格的菜单
8.3 菜单的横竖转换
8.4 菜单实例一：百度导航条
8.5 菜单实例二：流行的Tab菜单
第9章 CSS滤镜的应用
9.1 滤镜概述
9.2 通道（Alpha）
9.3 模糊（Blur）
9.4 运动模糊（Motion Blur）
9.5 透明色（Chroma）
9.6 下落的阴影（Dropshadow）
9.7 翻转变换（Flip）
9.8 光晕（Glow）
9.9 灰度（Gray）
9.10 反色（Invert）
9.11 遮罩（Mask）
9.12 阴影（Shadow）
9.13 X射线（X-ray）
9.14 浮雕纹理（Emboss和Engrave）
9.15 波浪（Wave）
第2部分 CSS+DIV美化和布局篇
第10章 理解CSS定位与div布局
10.1 div 标记与 span 标记
10.2 盒子模型
10.3 元素的定位
10.4 定位实例一：轻轻松松给图片签名
10.5 定位实例二：文字阴影效果
第11章 CSS+div布局方法剖析
11.1 CSS排版观念
11.2 固定宽度且居中的版式
11.3 左中右版式
11.4 块的背景色问题
11.5 排版实例：电子相册
11.6 div排版与传统的表格方式排版的分析
第12章 CSS+div美化与布局实战
12.1 框架搭建
12.2 实例一：蓝色经典
12.3 实例二：清明上河图
12.4 实例三：交河故城
12.5 自动选择CSS样式
第3部分 CSS混合应用技术篇
第13章 CSS与JavaScript的综合应用
13.1 JavaScript概述
13.2 JavaScript语法基础
13.3 实例一：输入时高亮显示的Excel表格
13.4 实例二：由远到近的文字
13.5 实例三：跑马灯特效
13.6 实例四：图片淡入淡出
13.7 实例五：CSS实现PPT幻灯片
13.8 实例六：灯光效果
13.9 实例七：舞台灯光
13.10 实例八：探照灯
13.11 实例九：鼠标文字跟随
第14章 CSS与XML的综合运用
14.1 XML基础
14.2 XML链接CSS文件
14.3 XML文字阴影效果
14.4 XML古诗字画
14.5 XML实现隔行变色的表格
第15章 CSS与Ajax的综合应用
15.1 Ajax概述
15.2 Ajax入门
15.3 Ajax实例：能够自由拖动布局区域的网页
第4部分 综合案例篇
第16章 我的博客
16.1 分析构架
16.2 模块拆分
16.3 整体调整
第17章 小型工作室网站
17.1 分析构架
17.2 模块拆分
17.3 整体调整
第18章 企业网站
18.1 分析构架
18.2 模块拆分
18.3 整体
2021-09-10 07:43:36
7.43MB
1
【CSS+DIV】html静态页面源代码 静态网页制作代码
HTML静态页面(CSS+DIV)
这是期末老师HTML老师布置的。本来要求一个，但我做了三个。 主要是CSS+DIV做的（3个项目）。
对于页面的布局，代码的规格，命名，都很清晰明了。
2021-08-03 09:30:56
6.3MB