css样式(第三篇)

筱风能动浪,岸树不遮山      2022-02-09     221

关键词:

?技术分享

<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 查看详情