14-HTML-CSS案例
1、超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<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>
</ul>
</div>
</body>
</html>
2、背景图片repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
} ul{
list-style: none;
}
body{
background-image: url(./images/timg2.jpeg);
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<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>
</ul>
</div>
</body>
</html>
3、通天bar图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
} ul{
list-style: none;
}
body{
/*background-image: url(./images/banner.jpg);*/
/*background-repeat: no-repeat;*/ /*水平居中通天banner图*/
/*background-position: center top;*/ /*综合属性设置*/
background: red url('./images/banner.jpg') no-repeat center top;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<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>
</ul>
</div>
</body>
</html>
4、固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*给body设置导航栏的高度，来显示下方图片的整个内容*/
padding-top: 49px;
}
.wrap{
width: 100%;
height: 49px;
background-color: #000;
/*设置固定定位之后，一定一定要加top属性和left属性*/
position: fixed;
top: 0;
left: 0; }
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto; }
.wrap .nav ul li{
float: left;
width: 160px;
height: 49px; text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "Hanzipen SC";
background-color: purple;
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
} </style>
</head>
<body>
<div class="wrap">
<div class="nav">
<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>
</ul>
</div>
</div>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </body>
</html>
5、父相子绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 277px;
height: 284px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.box img{
width: 277px;
height: 177px; }
.box .dtc{
width: 52px;
height: 27px;
background: url(./images/common.png) no-repeat -54px 0;
position: absolute;
top: -9px;
left: 9px;
}
.box .zhegai{
width: 277px;
height: 38px;
color: #fff;
line-height: 38px;
text-align: center;
background-color: rgba(0,0,0,.7);
position: absolute;
top: 139px;
left: 0; }
</style>
</head>
<body>
<div class="box">
<img src="./images/longxia.jpg" alt="">
<span class="dtc"></span>
<div class="zhegai">小龙虾</div>
</div> </body>
</html>
6
14-HTML-CSS案例的更多相关文章
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- 前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...
- Css案例整理
1.实现两个div并排显示 案例:checkbox的标题和内容需要并排显示,checkbox竖向排列 <head> <style type="text/css"& ...
- CSS案例3（在线教育网站）
案例练习目的是总结以前的css和html 还有ps的使用. 制作步骤: 准备相关文件.(内部样式表) html文件(index.html) 图片文件 准备CSS 初始化. 书写结构和样式 确定版心(是 ...
- 第 14 章 CSS 颜色与度量单位
学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一．颜色表方案 颜色的表现形式主要有 ...
- css笔记14：css文件之间可以相互引用
css文件之间相互引用是通过@import指令完成的 格式: @import url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
随机推荐
- EF的连表查询Lambda表达式和linq语句
select c; ), b=> b.Id, p=> p.BlogId, (b, p) => new {b}); public class Blog { public int Id ...
- centos安装epel源后，使用报错(Error: Cannot retrieve repository metadata (repomd.xml) for repository: epel. Please verify its path and try again)
报错如下: Error: Cannot retrieve repository metadata (repomd.xml) for repository: epel. Please verify it ...
- Maven构建时跳过部分测试
当遇到以下场景: 其他人写的单元测试影响统计结果 一些需要调用外部接口的测试暂不运行 需要在非本机环境上运行一些不回滚的单元测试 则有必要选择以下方法跳过部分测试. 在测试用例前加上注解 @Ignor ...
- 铁乐学Python_day08_文件操作
一.[基本的文件操作] 参数: 1.文件路径: 2.编码方式: 3.执行动作:(打开方式)只读,只写,追加,读写,写读! #1. 打开文件,得到文件句柄并赋值给一个变量 f = open('E:/Py ...
- 铁乐学python_day03-作业
1.有变量name = "aleX leNb" 完成如下操作: 移除name变量对应的值两边的空格,并输出处理结果 n1 = name.strip() print(n1) 结果:a ...
- September 12th 2017 Week 37th Tuesday
Failure is the fog through which we glimpse triumph. 失败是迷雾,穿过它,我们就可以瞥见光明. Sometimes the fog may be t ...
- codeforces 293E Close Vertices
题目链接 正解:点分治+树状数组. 点分治板子题,直接点分以后按照$w$排序,扫指针的时候把$w$合法的路径以$l$为下标加入树状数组统计就行了. 写这道题只是想看看我要写多久..事实证明我确实是老年 ...
- SOJ1022 Uniform Generator
Computer simulations often require random numbers. One way to generate pseudo-random numbers is via ...
- 如何搭建github+hexo博客-转
1.前言 其实早在这之前我就一直想过写博客,但由于种种原因一直没有去学习这方面的知识,最近半个月(从开始动手到搭建好)一直陆陆续续的在着手这方面的工作.从开始到搭建完成的过程中遇到了很多困难,因为在这 ...
- 8 个不常见但很有用的 Git 命令
1. 拉取远程代码并且覆盖本地更改 2. 列出远程和本地所有分支 3. 强制更新远程分支 4. 回滚一个 merge 5. 修改之前的提交记录或者很久前提交的记录 6. 使用多个远程代码库,并且使用多 ...