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{ /* 统一设置所有样式 */ ...
随机推荐
- Linux HugePages 配置与 Oracle 性能关系说明
一. HugePages 说明 1.1 HugePages 介绍 HugePages is a feature integrated into the Linux kernel with relea ...
- Linux at命令详解
at 只能执行一次,在一个指定的时间执行一个指定任务,只能执行一次,且需要开启atd进程 anacron: 适合于非 7*24 类型的服务器,以天为周期或者在系统开机后执行任务的工作 它会定时检测服务 ...
- Office 365实现单点登录系列(3)—使用Azure AD Connect 进行目录同步
Hello 小伙伴们,我回来了~ 2017年底中招了流感,还得了结膜炎,我也是无奈的···但使命感驱使我还是要把文章更完(这么敬业还不点赞关注(*^__^*) ) 我们接着上一篇文章继续说,上一篇已经 ...
- MySql报2006error错误的解决方法（数据过大）
最近迁移项目中发现,转移数据库出现的几个问题,其中之一就是 2006 error,解决过程如下: 首先贴出报错结果 [Msg] Finished - Unsuccessfully 出现这个结果,首先检 ...
- UE4中动画蒙太奇的合成
在游戏中的技能施法动作是可以通过软件合成的,笔者在这里介绍一种用UE4合成多个动画的操作. 在UE4中角色的动作可以由多种方式达成,一种是混合空间,例如角色的跑动和跳跃,其中的动作是由状态机控制的,原 ...
- python第二十三课——dict中的函数
dic1 = {...} dic2 = {...} dic1.update(dic2) 1.update(dict):dic1调用update传入dic2,如果dic2中的内容在dic1中不存在,那么 ...
- VM下，装centos7系统，配置nginx的问题
一.流程 1.先安装nginx依赖的包 (1)yum install gcc-c++ (2)yum install -y pcre pcre-devel (3)yum install -y zlib ...
- SAP NetWeaver BPM
什么是BPM? BPM是Business Process Management的缩写,翻译过来是业务流程管理.BPM本身并没有明确的定义,它更多的是一种概念,这个概念本身的产生来源于企业对众多业务系统 ...
- kukubeadm 1.6.1 + docker1.2.6 安装问题
kubeadm init --apiserver-advertise-address=192.168.20.229 --pod-network-cidr=10.244.0.0/16 kubelet: ...
- Redis——总结
启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis 127.0.0.1:6379> redis 127.0 ...