CSS 案例

【CSS 案例】的更多相关文章

css案例学习之table tr th td ul li实现日历

效果代码 <html> <head> <title>Calendar</title> <style> <!-- .month { border-collapse: collapse; table-layout:fixed; width:; } .month caption { text-align: left; font-family: normal % 宋体, arial; font-size:12px; font-weight:nor…

css案例学习之盒子模型

定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离. 案例代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm…

前端学习笔记--css案例

要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burlywood; } #container { width: 900px; margin: 0 auto; } #header { height: 220px; margin-bottom: 5px; } #nav { /*导航*/ height: 40px; background-color: aqua…

Css案例整理

1.实现两个div并排显示案例:checkbox的标题和内容需要并排显示,checkbox竖向排列 <head> <style type="text/css"> .curr_box { margin-top: 10px; } .row1 { float: right; width: 65%; position: relative; } label { float: left; height: 17px; width: 25%; text-align: cent…

CSS案例3（在线教育网站）

案例练习目的是总结以前的css和html 还有ps的使用. 制作步骤: 准备相关文件.(内部样式表) html文件(index.html) 图片文件准备CSS 初始化. 书写结构和样式确定版心(是1200像素)和各个模块布局(先行后列). 头部通栏: 共四部分 logo.导航.搜索栏.个人中心前两个左浮动,后两个右浮动 banner部分: 背景图片+左侧侧边导航栏+右侧我的课表模块 text-align: center; /* 文字水平居中 */ font-weight: 700; /*…

css案例学习之用thead、tbody、tfoot实现漂亮的table布局

首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最上面, <tfoot> 总在表的最下面效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…

css案例学习之ul li dl dt dd实现二级菜单

效果代码实现 <!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="…

css案例学习之按钮超链接

效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态.被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; b…

css案例学习之relative与absolute

代码 <!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> <title>absolute属性</tit…

css案例学习之float浮动

代码: <!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> <title>float属性</title…

css案例学习之父子块的margin

两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text/css"> /* body{ margin:0 0; } */ div.father{ /* 父div */ background-color:#fffebb; text-align:center; font-family:Arial, Helvetica, sans-serif; font…

css案例学习之div与span的区别

代码: <html> <head> <title>div 标记范例</title> <style type="text/css"> div.widthstyle{ font-size:18px; /* 字号大小 */ font-weight:bold; /* 字体粗细 */ font-family:Arial; /* 字体 */ color:#FFFF00; /* 颜色 */ background-color:#0000FF;…

css案例学习之层叠样式

代码 <html> <head> <title>层叠特性</title> <style type="text/css"> p{ color:green; } .red{ color:red; } .purple{ color:purple; } /*这里的顺序是关键*/ #line3{ color:blue; } </style> </head> <body> <p >这是第1行…

css案例学习之继承关系

代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 */ text-decoration:underline; /* 下划线 */ } em{ color:red; /* 颜色 */ } </style> </head> <body> <h1><em>前沿</em>教室</h1>…

css案例学习之全局声明*{} 与body{}的区别

代码 <html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </sty…

css案例学习之并集选择器

代码 <html> <head> <title>并集选择器</title> <style type="text/css"> h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline;…

css案例学习之class执行的顺序

<!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> <title>选择器.class</title&g…

css案例学习之id要唯一

ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css"> #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } </style> </head> <body> <p id=&q…

CSS案例

1.美团网效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>美团</title> <style type=&q…

css案例 - 评分效果的星星✨外衣

纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名)的情况,还可以通过添加多个结构实现. 但是再加上这星星都要渐变效果,我当时差点找设计谈谈去(当然是求人家改成不渐变啊). 不过真的去的话,显得咱们太不专业了不是,好看的效果都实现不了,还叫什么前端. 乖乖坐下来看设计稿. 这么直接看的话,可能没有思路,不过可以换一种方式来思考: 先想想下边这种效果怎…

css案例 - mask遮罩层的华丽写法

mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /*移动端*/ background: rgba(0,0,0,.5); /*ie*/ background: #000; opacity: 0.5; filter: alpha(opacity = 0.5); } 但是这种适用于内容小于屏幕高度的,如果内容撑…

一.滑动门案例二.小黄人案例三.圣杯布局&双飞翼布局…

CSS 案例学习

1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片并底端对齐代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> a{ display: inline…

css案例学习之span边框实现的特殊效果

bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{ height:; width:; /*border-top:solid 6px #fff; border-left:solid 6px #f90;*/ /*border-top:solid 6px #fff; border-right:solid 6px #f90;*/ /*border-bottom:solid 6px #fff; border…