关键词:
?
<div class=”box1”>
<div class=”line”></div>
<div class=”box1-1”></div>
</div>
.line {border: 10px solid #9f8e02;border-radius: 10px;}
.box1-1{width:95%;max-width:1000px;margin:0 auto;background:#xxx;margin-top:-10px;}
.line1 {border: 3pxsolid #fec42d;border-top-left-radius: 3px;border-bottom-left-radius: 3px;float: left;width:39%;}
.title-c {float: left;margin-left: 10px;margin-top: -10px;}
.line1 {border: 3pxsolid #fec42d;border-top-left-radius: 3px;border-bottom-left-radius: 3px;float:right;width:39%;}
.title span {color: #fff;font-size: 20px;font-weight: bold;background: #fec42d;border-radius: 15px;padding: 8px 30px;}
.code {background: url(/wp-content/uploads/sites/1/2016/12/code-inv.png)bottom right no-repeat;position: fixed;width: 232px;height: 448px;right: -187px;top: 35%;transform: rotate(-30deg);-ms-transform: rotate(-30deg);-moz-transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-o-transform: rotate(-30deg);}
.code:hover {right: 0;transform: rotate(0);-ms-transform: rotate(0);-moz-transform: rotate(0);webkit-transform: rotate(0);-o-transform: rotate(0);}
字体阴影:
.adv-span {background: url(/wp-content/uploads/sites/1/2016/12/adv.png)top center no-repeat;}
span{display:block;text-align: center;font-size: 30px;color: #fff;font-weight: bold;text-shadow: 0px 0px 5px #444;line-height: 55px;}
.bottom-a {background: #cccdcf;}
.worda {width: 50%;float: left;background: #cccdcf;margin-left: 5%;}
.img-a {width: 40%;float: right;background: #fff;}
.word-a, .img-b img {max-width: 432px;}
.img-a img, .word-b {max-width: 288px;}
将段落的第一行缩进 50 像素:p{text-indent:50px;}
Div定义了float,这个div结束时,一定要加清楚浮动的代码
background-size 属性规定背景图片的尺寸。
对一些网页的设计,重复的背景图截取其中的一块,设置背景平铺就可以了,这样可以加快网页加载的速度。
对于这样的背景图,需要切成3部分,写静态网页时需要些3个div。
<div class="box1-1"></div>
<div class="box1-2"></div>
<div class="box1-3"></div>
对应CSS代码:
.box1-1{background:url(img1) top center no-repeat;padding-top:260px;}
.box1-2{background:url(img2) top center no-repeat;}
.box1-3{background:url(img3) top center no-repeat;}
web前端第三篇css选择器
一、css概述CSS是CascadingStyleSheets的简称,中文称为层叠样式表,对html标签的渲染和布局CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。 例如 二、css的四种引入方式1.行内式 行内式是在标记的style... 查看详情
深入理解脚本化css系列第三篇——脚本化css类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接改变其行间样式<divid="test"st... 查看详情
html/css(新手入门第三篇)
一、学习心得---参考优秀的网页来学习。1我们只做的静态网页主要用的技术?html+css只要网上看到的,他的源代码公开的。【1】、先去分析,他们页面是如何布局(结构化)【2】、再试着去做一下,---模仿过程。【3】、最后我... 查看详情
第十三篇:html和css入门
...et标签和label标签八、标签总结九、CSS选择器十、CSS之float样式十一、CSS之display样式十二、CSS之内外边距 查看详情
第三篇:函数
第三篇:函数 PYTHON-函数的定义与调用,返回值,和参数PYTHON-函数的定义与调用,返回值,和参数-练习PYTHON-函数对象,嵌套,名称空间与作用域,闭包函数PYTHON-迭代器,xxx生成式PYTHON-有参装饰器,无参装饰器,语... 查看详情
英汉翻译第三篇
Manproposes,Goddisposes.TodoasGoddisposestheAmericanCollegeofSurgeons 美国外科医生学会TrinityCollege剑桥三一学院/?tr?n?ti/入学matriculation毕业graduation 查看详情
第三篇第二章消防给水
防止下水回流 查看详情
spring第三篇
...二篇中,叙述了将对象交给spring创建和管理,今天在spring第三篇中,主要写两个点一是spring的思想二是spring中bean元素的属性配置。1spring思想 1.1 IOC(Inverseof Control):控制反转,将对象的创建权交给了Spring. ... 查看详情
第三篇第十四章消防供配电
第三篇第十章建筑灭火器配置
深入理解javascript函数系列第三篇
...来创建新的函数对象。本文是深入理解javascript函数系列第三篇——属性和方法 属性【length属性】 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数functiona 查看详情
django框架之第三篇模板语法
Django框架之第三篇模板语法(重要!!!)一、什么是模板?只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板。二、模板语法分类一、模板语法之变量:语法为{{}}:在Django模板中遍历复杂数据结构的关键是句... 查看详情
第三篇
一:站立图 二:燃尽图 三:项目进展待完成任务已完成任务无首页页面改进 购物车增加功能 购物车删除功能 购物车修改功能 用户中心页面改进 成员贡献比王家富24%林... 查看详情
第三篇io流技术(代码片段)
编码和解码packagecom.zzp.demo;importjava.io.UnsupportedEncodingException;/****字符串到字节-->编码*@authorjava**/publicclassContentEncodepublicstaticvoidmain(String[]args)throwsUnsupportedEncodingExceptionStri 查看详情
第三篇:python运算符
运算符 算术运算符 假设以下变量a=10,变量b=20: 赋值运算符 比较运算符 位运算符 逻辑运算符 成员运算符 身份运算符 运算... 查看详情
第三篇
项目冲刺——第三阶段前两阶段很ok,目测这三天可以搞定!分工讨论 大体上搞定,设置困难度的功能还未完成。 团队成员任务郭达 数据库测试刘德培 数据库完善石浩洋 整理文档曾繁钦 界面功能测试孙... 查看详情
深入理解javascript作用域系列第三篇
...为声明提升的存在。本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升a=2;vara;console.log(a); 直觉上,会认为是undefined,因为vara声明在a=2;之后,可能变量被重新赋值了,因为会被赋予默认值un 查看详情
重构之路第三篇——重新组织数据
本篇目录:1SelfEncapsulateField(自封装字段)2ReplaceDataValuewithObject(以对象取代数据值)3ChangeValuetoReference(将值对象改为引用对象)4ChangeReferencetoValue(将引用对象改为值对象)5 ReplaceArraywithObject(以对象取代数组)6DuplicateObserverdDat 查看详情