html部分---样式属性;
<!--大小-->
width:宽度
height:高度
<!--背景与前景-->
"background-color:#0F0; 背景颜色 background-image:url(../%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/psb.jpg); 背景图片 background-attachment:fixed; 背景不随字体滚动,是固定的; background-attachment:scroll; 背景随字体滚动;
background-size:300px 300px;背景图片的大小;
background-repeat: no-repeat; 背景图片的平铺;一般为norepeat
背景图片的位置
background-position:center; 居中 background-position:top left 居上居左 background-position:top 200px left 200px;居上200像素 居左200像素
<!--字体-->
style="font-family:微软雅黑; 字体类型 font-size:12px; 字体大小 font-weight: bold; 文字加粗 font-style:italic; 文字倾斜 color:red; 文字颜色 text-decoration:underline; 下划线 text-decoration:overline;上划线 text-decoration:line-through;删除线 text-decoration:none 去掉下划线 text-align:center; text-align:left; text-align:right; 水平居中,水平居左,水平居右 vertical-align:middle; line-height:40px;垂直居中,设置行高,两个一般同时出现 text-indent:20px;首行缩进20px;
超链接的样式:
<style> #d1{ width:100px; height:30px; background-color:red; color:#FFF; text-decoration:none} </style> </head> <body> <a id="d1" href="http://www.baidu.com">百度一下</a> </body>
按钮效果:
<style> #anniu{ width:104px; height:40px; background-color:#0CF; color:#FFF; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;} </style> </head> <body> <div id="anniu">百度一下</div> </body>
边距 间距:margin与padding
<style> /* *{ margin:0px auto; padding:0px}网页都需要写,把每个元素的边距和间距都去掉,auto是把所以网页中的<div>居中。*/ #wai{ width:300px; height:300px; background-color:red} #nei{ float:left; width:200px; height:200px; background-color:blue; margin:10px 20px 30px 40px;/*距wai的边距*/ padding: 10px 20px 30px 40px;/*距li的边距*/} #li{ width:100px; height:100px; background-color:#FF0} </style> </head> <body> <div id="wai"> <div id="nei"> <div id="li"></div> </div> </div> </body>
<!--边界 边框-->
<style> .bb{ border:1px solid red; width:300px; height:300px} .aa{ border-bottom:100px solid #96C; border-left:100px solid #C3F; border-top:100px solid #FC0; border-right:100px solid #00C} </style> </head> <body> <div class="bb"><div class="aa"></div></div> </body>
列表 方块
html部分---样式属性;的更多相关文章
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 一起学HTML基础-CSS样式表常用样式属性
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
- hack:选择符前缀法,样式属性前缀法
选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6 ...
- 10 GridView 样式属性
GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
随机推荐
- Hibernate 错误处理
1. 在处理映射 1 对 n 时,Customer类为 1, Order类为 n,对象关系映射文件中没有错误,<many to one> 也正确,表名通类名. 但是,在执行插入时,发生两个 ...
- C- struct的使用
数组是二等公民,不能进行整体赋值,或者参数传递,或者作为返回值. But!如果封装在struct内部,就完全不一样了 #include <iostream> using namespace ...
- C++-const_cast只能用于指针和引用,对象的const到非const可以用static_cast
Static_cast可以对对象也可以对指针也可以对引用,但是const_cast只可以对指针和引用使用,后者不可以对对象用,如果你要把一个const值转化为非const值只能用隐式执行或通过使用st ...
- CodeForces 546B-Soldier and Badges
题意: 给出一些数字,要求每个数字都不一样需要增加几 思路: 先排序,然后一个个增加,最后求总和差 代码如下: #include <iostream> #include <cstdi ...
- pyqt5 笔记(二)实现http请求发送
上个图~ index.py 文件 # -*- coding: utf-8 -*- from PyQt5 import QtWidgets,QtCore #从pyqt库导入QtWindget通用窗口类 ...
- 第三课 Spinner的使用
Spinner的表现形式相当于C#的ComboBox,样子如下图: 但选择项的添加方式相当不一样,必须使用数据适配器,上例子. Layout--Main.axml <?xml version=& ...
- HTML中使用CSS的方法
行内样式表 <html> <head> <title>行内样式表</title> </head> <body> <p st ...
- Linux交叉开发环境搭建 —— 效率之源
楼主今天终于把所有Linux开发环境需要的软件下载完毕了.虽然以前也是搭建过的,时间久了又折腾了一晚上. 交叉环境: Windows.Linux文件共享 SecureCRT 连接虚拟机终端 工具: V ...
- 不要在类的函数中使用static字段
昨天在做存储服务的压力测试,后台是采用多线程根据玩家唯一标识做线程划分的,在测试的过程中发现,进行存储的时候,会发生玩家数据错乱的情况. 一开始怀疑是上层逻辑在处理数据的时候发生了错乱,导致保存的时候 ...
- 【Avalon】escape
[\uD800-\uDBFF][\uDC00-\uDFFF] var rsurrogate = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g var rnoalphanumeri ...