DW网页代码笔记

            DW网页代码笔记

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 平分
   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>
………编加图片<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

猜你喜欢