HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="Untitled-练习.css" rel="stylesheet" type="text/css" />

</head>

<body>

<center>

<div style="background-color:#F0C"></div>

</center><br />

<a href="http://www.cnblogs.com/" target="_blank">博客园</a>

<br />

<p></p>

<p></p>

<div class="aa" id="a1">H</div>

<div class="aa" id="a2">E</div>

<div class="aa" id="a3"><p>L</p></div>

<div class="aa" id="a4">L</div>

<div class="aa" id="a5">O</div>

</body>

</html>

CSS

@charset "utf-8";

/* CSS Document */

p/*针对于所有段落，即p标签*/

{

    font-size:36px;/*针对于字体大小*/

    color:#00F;/*针对于字体颜色*/

    background-color:#6F0;}/*针对于背景颜色*/

a/*针对于所有的a标签设置字体大小*/

{

    font-size:24px}

a:link/*访问之前的样式*/

{

    text-decoration:none;/*没有下划线*/

    color:#;}/*字体为黑色*/

a:visited/*访问过后的样式*/

{

    text-decoration:none;/*没有下划线*/

    color:#;}/*字体为黑色*/

a:hover/*鼠标悬浮时的样式*/

{

    text-decoration:underline;/*有下划线*/

    color:#F00;}/*字体为红色*/

a:active/*点击时的样式*/

{

    text-decoration:underline;/*有下划线*/

    color:#00F;}/*字体为蓝色*/

/*class选择器显示的格式是<div class="名字"></div>，该题设名字为".aa"，class选择器都是以"."开头*/

.aa/*设定div的范围，这样显示出来就不是直接占用一行了，这里设置的是共同点，公用的，不同的单独设置在id里面*/

{

    width:30px;

    height:60px;

    transition:width .2s;/*鼠标悬浮时0.2秒显示其他颜色*/

    box-shadow:# 5px 5px 4px;/*设置阴影：颜色灰色，向右移出5个像素，向下移出5个像素，虚化4个像素*/

    border: 1px solid #;}/*边框设为1个像素，solid是实线的意思，设为黑色*/    

.aa p/*.aa余p之间有空格表示p是.aa的后代，针对于.aa当中的p标签*/

{/*如果哪个p标签需要变换颜色可单独进行更改，若不更改则显示最开始时规定的p标签样式*/

    font-size:10px;

    color:#F00;

    background-color:#03C;}

/*设定每个div区域的颜色，在代码中使用时在class="aa"后面加上id="a1,a2,a3,a4,a5"*/

#a1/*在id里面设置不同的特点*/

{

    background-color:#0F0;

    box}

#a1:hover/*鼠标悬浮时的样式*/

{

    cursor:help;/*鼠标悬浮时显示的光标形状为问号，可以变成小手，尽量不要改成小手，因为小手经常被默认为可以进行点击的光标*/

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a2

{

    background-color:#F69;}

#a2:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a3

{

    background-color:#FF0;}

#a3:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a4

{

    background-color:#6FC;}

#a4:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

#a5

{

    background-color:#F00;}

#a5:hover/*鼠标悬浮时的样式*/

{

    width:80px;/*设置鼠标悬浮时显示的颜色宽度*/

    background-color:#;/*设置鼠标悬浮时显示的颜色*/}

显示结果图片

5月21日 CSS样式表加阴影的更多相关文章

  1. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  2. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  3. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  5. 9月9日HTML上午表单元素2（框架、样式表）

    五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...

  6. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  7. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  8. 关于2013年1月21日的DNS故障分析文章

    首页 资讯 小组 资源 注册 登录       首页 最新文章 业界 开发 IT技术 设计 创业 IT职场 访谈 在国外 经典回顾 更多 > - 导航条 - 首页 最新文章 业界 - Googl ...

  9. Python 学习日志9月21日

    9月21日 周四 今天是个特殊的日子吗,总感觉9月21这个日子听着怪怪的. 今天早晨看<Head First HTML and CSS>第13章节“表格和更多列表”,内容不多,看完并做了详 ...

随机推荐

  1. CUBRID学习笔记 39 net使用dataset 返回查询的数据

    using CUBRID.Data.CUBRIDClient;    namespace DataSetExample {     class Program     {         static ...

  2. CUBRID学习笔记 19 sql语句1

    创建 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 create table tableName (字段名 字段类型 pr ...

  3. 小题精炼-----初试C语言

    毫无疑问, 这个又是给新入门学C语言的小鲜肉准备的! 题解: 1. 直接两个循环就ok啦! 当初讲课的时候几乎讲过原题啦. 2. 直接 100的三次方就是1000000啦, 所以直接对某数的三次方开方 ...

  4. iOS - UIScrollView

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIScrollView : UIView <NSCoding> @available(iOS 2.0, ...

  5. Python学习（3）变量类型

    目录 变量赋值 多个变量赋值 标准数据类型 Python数字 Python字符串 Python列表 Python元组 Python元字典 Python数据类型转换 type数据类型查看 变量赋值 Py ...

  6. 【Todo】【读书笔记】大数据Spark企业级实战版 & Scala学习

    下了这本<大数据Spark企业级实战版>, 另外还有一本<Spark大数据处理:技术.应用与性能优化(全)> 先看前一篇. 根据书里的前言里面,对于阅读顺序的建议.先看最后的S ...

  7. 【Todo】用python进行机器学习数据模拟及逻辑回归实验

    参考了这个网页:http://blog.csdn.net/han_xiaoyang/article/details/49123419 数据用了 https://pan.baidu.com/s/1pKx ...

  8. 【Android界面实现】FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别

    转载请注明出处: http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配 ...

  9. C++——类和动态内存分配

    一.动态内存和类 1.静态类成员 (1)静态类成员的特点 无论创建多少对象,程序都只创建一个静态类变量副本.也就是说,类的所有对象都共享同一个静态成员. (2)初始化静态成员变量 1)不能在类声明中初 ...

  10. golang json

    1.Go语言的JSON 库 Go语言自带的JSON转换库为 encoding/json 1.1)其中把对象转换为JSON的方法(函数)为 json.Marshal(),其函数原型如下 func Mar ...