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. C#四则运算之策略模式

    Calculator.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  2. LIST动态表格画线（动态列）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. run a Freight robot (3)

    5.Logging In Once the robot is turned on and the robot is on the network, ssh into the computer of t ...

  4. 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  5. C#垃圾回收机制(GC)

    GC的前世与今生 虽然本文是以.net作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...

  6. json、javaBean、xml互转的几种工具介绍 （转载）

    工作中经常要用到Json.JavaBean.Xml之间的相互转换,用到了很多种方式,这里做下总结,以供参考. 现在主流的转换工具有json-lib.jackson.fastjson等,我为大家一一做简 ...

  7. HDU-4507 吉哥系列故事——恨7不成妻 数位DP

    题意:给定区间[L, R]求区间内与7无关数的平方和.一个数当满足三个规则之一则认为与7有关:1.整数中某一位是7:2.整数的每一位加起来的和是7的整数倍:3.这个整数是7的整数倍: 分析:初看起来确 ...

  8. oracle 性能优化建议小结

    原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHER ...

  9. 关于jQuery的小知识点

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  10. Android网络编程系列 一 JavaSecurity之JSSE(SSL/TLS)

    摘要:     Java Security在Java存在已久了而且它是一个非常重要且独立的版块,包含了很多的知识点,常见的有MD5,DigitalSignature等,而Android在Java Se ...