DW网页代码笔记
DW网页代码笔记
不要点击:https://item.taobao.com/item.htm?id=613711271112
1.样式。 class 插入类样式
标签技术(html)解决页面的内容
样式技术(css)解决页面的外观
脚本技术 解决页面动态交互问题
<form><input type="text" placeholder="请输入文字" class="kuang2"/><input type="submit" value="搜索" class="anniu1" /></form>
字体:
…………font-size: 字体大小
…………font-family:设置字体
…………… color:字体颜色
text-align:对齐方式 center居中 left左 right右
text-indent:首行缩进
font-style:是否倾斜 |italic 倾斜 normal正常
font-weight:bold加粗 normal 正常
text-decoration:线条 underline下划线 overline上划线 linethrough删除线 none 没线
line-height:行高
letter-spacing;字于字之间的距离
class 填写标签
display:black 换行设宽高
display:inline-black 即不换行又可以设置宽高
<p></p > 段落
<span></span>普通文字
类样式开头
<style type="text/css"></style>
*{margin:0px; padding:0px;}
超链接
<a hret="#"></a >
<a hret="图片路径"></a >
原网页
另打开一个网页
表单:<body></body>
<form></form>
method="post"/get
安全/ 不安全
单元格
<body>
<form>
<table>
<tr>
<td>账号<input type="text" name="name" ></td>
</tr> (文本框) (账号)
<tr>
<td>密码<input type="password" name="pad" ></td>
</tr> (密码)
</table>
</form>
</body> value placeholder="文本框中的文字"
textarea 备注 多行文本框
<input type="radio"
(性别)
<input type="checkbox"
(多选框)
<input type="file"
(上传图片)
<input type="text"
(搜索栏)
type="submit"
(搜索按钮)
button 普通按钮
reser 重置
submit 提交
value
按钮上的文字
下来列表
请选择:
<select>
<option>点</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br/>
<br/> 换行
背景属性
background-color 背景颜色 centent中
image 背景图像
repeat 重复
移动图片:background-position:
display:inline;横排
表格 <table></table/> width 长 border 线宽 frame 显示外边框 rules 显示内边框
<tr>行<td>行里面的单元格</td></tr>
列表 <ul><li>点</li></ul>
list-style-type:none; 去点
<ol></ol>
<dl><dt><dd></dd></dt></dl>
colspan 竖
rowspan 横
边框属性
border:设置边框(px) solid颜色 auto 平分
边框设置:width:1700px;
height:1000px;border:solid #000
padding:(px)内间距 (上下)(左右)上 右 下 左
border-collapse:表格边框是否分开 collapse不分开 separate分开 边框线
display-block 排列方式:从上到下排列
display--inline 从左到右
margin-top上 right右 bottom下 left左(外部距离)
padding-
border-style样式 width宽度 color颜色
solid 实线 dashed虚线 dotted点线 double 双线
height;设置高度
line-height 设置行高
border-radius 切园
漂浮 clear:both 忽略漂浮 左漂浮left float:right右漂浮
background-siez填充图片大小
#xiao1{设置属性}
<div id="da">
<div id="xiao1">xiao1</div> 漂浮
<div id="xiao1">xiao1</div> 漂浮
<div id="xiao1">xiao1</div> 漂浮
<div id="xiao4">xiao4</div> 不漂浮
</div>
按钮
a{text-decoration;none;}去下划线
a:linked{color:颜色} 没点过的颜色
a:hover{color:颜色} 鼠标放上去
a:visited {color:颜色}鼠标点过一次
a:active{color:颜色} 鼠标点中激活链接的颜色
定位
position;relative相对定位
absolute绝对定位
大四边形得用以下小四边形的定位。否则小四边形的参照物是整个网页
子标签绝对定位。父标签相对定位
background:linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
上下左右
渐变色
position:relative; 鼠标移动到图片上变手指
position:fixed;悬浮在页面顶端
关键字如下:
…………文本框限制数10字:maxlength“10”
…………方框居中:margin-left:50px
…………居中:text-align:center
左对齐:left...右对齐:right
…………隐藏手机号码:placeholder
…………点鼠标提示文字:title
………上传图片:file
…………用来插样式:(span)
…………去点:lime-style-type:none
………第一图片:lime-style-image
…………行高:lime-height:30px
…………漂浮:float:left
………超连接:<a..href> <a href="http://www.w3school.com.cn">W3School</a>
………编加图片<img..src>
……….a去线:text-decration:none
………斜体字:em
………文字加粗:select
………切园:border-radius
………相对定位:position:relative
………绝对定位:position:absolute
………内填充:padding
………外边界:margin
………边框: border
上:top,下bottom, 左:left,右:right
……字体颜色:color
……背景颜色:background:color
背景图片:background:image
不平铺:background-repeat-no-repeat
平移图片:background-position
字体大小:font-size
设计字体:font-family
字体样式:font-style
宽:width,高:height
应用选择器:class..#.id
实线:solid,虚线dashed,点线:dotted
双线:double
有序列表:ol,无序列表ul(li)
表格:table,tr,td
夸列:colspan....夸行:rowspan
普通框:text
密码框:password
单选按钮:radio
多选按钮:checkbox
下拉框:select,option
文本框:textarea....宽cols..高rows
重置按钮:reset....提交按钮:submit
普通按钮:button
按钮上的文字:vabmt
下拉菜单:1..dropdown
2..dropdown-content
3..dropdown:hover空格.dropdown-content
1{display:inline-block}
2{display:none;background-color;min-width;box-shadow..rgba..;padding}
3.{d
本文来自博客园,作者:无泪人,转载请注明原文链接:https://www.cnblogs.com/zenghongfei/p/11479643.html