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. 不要温柔地走入promise

    第一步 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  2. iOS - OC 内存管理

    1.OC 基本内存管理模型 1.1 自动垃圾收集 在 OC 2.0 中,有一种称为垃圾收集的内存管理形式.通过垃圾收集,系统能够自动监测对象是否拥有其他的对象,当程序执行需要空间的时候,不再被引用的对 ...

  3. springmvc企业级开发实战

    一.用eclipse插件搭建项目 二.pom文件 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...

  4. [转载] 一致性问题和Raft一致性算法

    原文: http://daizuozhuo.github.io/consensus-algorithm/ raft 协议确实比 paxos 协议好懂太多了. 一致性问题 一致性算法是用来解决一致性问题 ...

  5. poj2420A Star not a Tree?(模拟退火）

    链接 求某一点到其它点距离和最小,求这个和,这个点 为费马点. 做法:模拟退火 #include <iostream> #include<cstdio> #include< ...

  6. mysql 聚集函数需要注意的问题

    1.当没有记录的时候,使用聚集函数,会导致出现一条记录,记录的取值都是NULL,如下:mysql> select name from student where name='David';Emp ...

  7. (八)shell中的循环结构

    1.for循环(1)要求:能看懂.能改即可.不要求能够完全不参考写出来.因为毕竟嵌入式并不需要完全重新手写shell,系统管理员(服务器运维人员,应用层系统级管理开发的才需要完全掌握shell) 这里 ...

  8. FragmentPagerAdapter与FragmentStatePagerAdapter区别

    在一个 Android 应用中,我使用 FragmentPagerAdapter 来处理多 Fragment 页面的横向滑动.不过我碰到了一个问题,即当 Fragment 对应的数据集发生改变时,我希 ...

  9. Unable to execute dex: Multiple dex files define Lcom/gl

    [2015-04-16 17:42:04 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/gl/softphon ...

  10. QT对话框模式与非模式

    QT模态对话框及非模态对话框 非模态对话框(Modeless Dialog)的概念不是模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭.对于在模态来显示对 ...