23-Web-表单和CSS基础
2024-05-11 23:44:37
1.表单标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 1.表单标签：formform--><form action="" method=""> </form></body>
</html>
2.input标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- input标签会因为type属性值不同功能完全不一样 --><!-- 1.文本输入框: textname属性：对输入框输入的数据进行说明和区分的(类似字典的key)value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)placeholder属性：输入框中的提示信息maxlength属性：最大输入的文字的个数--><label for="tel">手机号:</label><input id="tel" type="text" name="tel" value="15300022703" placeholder="请输入手机号码" maxlength="11"/><br><br><label for="uname">用户名:</label><input id="uname" type="text" name="username" value="" placeholder="请输入用户名"/><br><br><!-- 2.密码输入框：password name属性：对输入框输入的数据进行说明和区分的(类似字典的key)value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)placeholder属性：输入框中的提示信息maxlength属性：最大输入的文字的个数--><label for="pw">密码:</label><input id="pw" type="password" name="pw" value="123456" placeholder="请输入密码"/><br><br><!-- 3.单选按钮: radioname属性：同一组选项的name属性必须相同，才能做到单选的效果value属性：指定按钮选中的时候对应的值checked属性：设置默认选中--><font>性别：</font><input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label><input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label><br><br><!-- 4.复选按钮: checkboxname属性：同一组选项的name属性必须相同value属性：指定按钮选中的时候对应的值checked属性：设置默认选中--><font size="" color="">爱好：</font><input type="checkbox" name="hobby" id="b" value="篮球" /><label for="b">篮球</label><input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label><input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label><input type="checkbox" name="hobby" id="w" value="网球" /><label for="w">网球</label><br><br><!-- 5.按钮：button --><input type="button" name="" id="" value="确定" /><input type="button" name="" id="" value="取消" /><br><br><!-- button标签 --><button type="button">确定</button><button type="button"><img src="./img/baidu.ico" ><br>百度</button><br><br><!-- 6.重置按钮 和 提交按钮重置：重置当前form标签中所有的相关标签的状态提交：将<strong>当前form标签</strong>中所有设置了name属性的相关标签以: name=value 形式对应数据进行提交--><input type="reset" name="" id="" value="重置1" /><br><br><br><form action="" method="get"><input type="text" name="username" placeholder="用户名"/><br><br><input type="password" name="password" id="" value="123" placeholder="密码"/><br><br><input type="reset" value="重置2"/><input type="submit" name="" id="" value="提交" /></form></body>
</html>
3.select和textarea标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 1.select标签 select - 整个下拉列表option - 下拉列表中的选项注意：name和value属性都需要赋值--><form action="" method="get"><!-- 基本的下拉列表 --><select name="province"><option value ="四川">四川省</option><option value ="辽宁">辽宁省</option><option value ="吉林">吉林省</option><option value ="山东">山东省</option></select><select name="city"><option value="成都">成都市</option><option value="绵阳">绵阳市</option></select><br><br><!-- 内容进行分类 --><select name="city"><!-- optgroup添加分组 --><optgroup label="四川省"></optgroup><option value="成都">成都市</option><option value="绵阳">绵阳市</option><option value="德阳">德阳市</option><optgroup label="辽宁省"></optgroup><option value="大连">大连市</option><option value="沈阳">沈阳市</option><option value="铁岭">铁岭市</option></select><input type="submit" value="提交"/></form><br><br><!-- 2.textarea标签 rows属性：最能显示的行数（控制高度）cols属性：列数（控制宽度）name属性：区分和提交数据的时候用placeholder属性：maxlength属性注意：textarea不需要value属性,标签内容就相当于value--><textarea rows="4" cols="40" name="comment" placeholder="请输入你的建议" maxlength="200">没有意见！</textarea><!-- div标签无语义标签， 一般用来对标签进行分组和分块而存在span标签也是无语义的标签--><div id=""></div></body>
</html>
4.CSS基础语法
<!--1. 什么是CSSCSS又叫层叠样式表是web标志中的表现标准,负责标签(内容)样式和布局2.CSS代码写在哪儿内联样式表 - 将css代码写在标签的style属性中（样式只针对一个标签有效）内部样式表 - 将css代码写style标签中（样式可以针对整个html中所有的标签）外部样式表 - 将css代码写在css文件中，然后在html中用link标签去导入（样式可以针对所有的html中所有的标签有效）内联样式表的优先级最高, 内部样式表和外部样式表谁后出现谁的优先级高3.CSS代码怎么写语法：选择器{属性名1:属性值1;属性名2:属性值2;...}说明:选择器 - 选中当前需要添加样式的标签{} - 固定写法(注意:内联样式表中 选择器{} 需要省略)属性 - 以 属性名:值 的形式存在，一个属性结束后要分号；CSS中有哪些属性，每个属性干嘛的都是固定(CSS3中有200多个属性)常用属性：color(文字颜色)、background-color(背景颜色)、font-size(字体大小)、width(宽度)、height(高度)、属性值：a.数字大小需要添加单位(px)b.颜色值有三种方法：颜色的英文单词(red)、#6位的十六进制数(#ff0000)、rgb或者rgba值(rgb(255,0,0))rgba(255,0,0,1) -最后一个参数是透明度，取值范围是0~1-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 外部样式表 --><link rel="stylesheet" type="text/css" href="css/css1.css"/><!-- 内部样式表 --><style type="text/css">#b1{color: blue;background-color: rgba(255,0,0,0.5);}#b2{background-color: gold;width: 200px;}#p1{color: green;background-color: greenyellow;}</style></head><body><!-- 内联样式表 --><p id="p1" style="color: red; font-size: 20px;">我是段落1</p><h1 id="b1">我是标题1</h1><h1 id="b2">我是标题2</h1><div id="div1"></div><div id="div2"></div></body>
</html>
5.选择器
<!--
1. 常用选择器
1)标签选择器(元素选择器) - 直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签2)id选择器 - 在id属性值前加#作为一个选择器，选中当前页面中id值是指定值的标签(id一般是唯一的)
#p1{} - 选中id属性值为p1的标签3)类选择器(class选择器) - 在class属性之前加.作为一个选择器，选中当前页面中所有class值是指定值的标签
.p1 - 选中class属性值为p1的标签
注意：不同的标签的class值可以相同，同一个标签可以同时拥有多个不同的class值(多个之间用空格隔开)4）后代选择器 - 将多个独立的选择器用空格隔开作为一个选择器
div #p1{} - 选中div标签中id是p1的标签(最终选中的是id是p1的标签，但是这个标签必须是div的后代)5）父子选择器 - 将多个独立的选择器用>隔开作为一个选择器
div>.c1{} - 选中div中class值是c1的子标签6) 群组选择器 - 将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
p,a{} - 选中所有的p标签和所有的a标签
#p1,.c1,a{} - 选中id是p1的标签和class是c1的标签以及所有的a标签7）通配符 - 将*作为选择器，选中当前页面中所有的标签
*{}-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 1.标签选择器 *//* p{color: red;} *//* 2.id选择器 *//* #p1{color: #0000FF;} *//* 3.类选择器 *//* .p1{color: #008000;}.c1{background-color: #FFD700;} *//* 4.后代选择器 *//* div #p1{background-color: #ADFF2F;} *//* div>.c1{background-color: #ADFF2F;color: red;} */*{color: red;}</style></head><body><!-- 1.标签选择器示例 --><!-- <h1>我是标题1</h1> --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超链接1</a><p>我是段落2</p><div id=""><h2>我是标题2</h2><p>我是段落3</p></div> --><!-- 2.id选择器 --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超链接1</a><p id="p1">我是段落2</p><div id=""><h2>我是标题2</h2><p>我是段落3</p></div> --><!-- 3.class选择器 --><!-- <p class="p1">我是段落1</p><a class="c1" href="https://www.baidu.com">我是超链接1</a><p class="c1">我是段落2</p><div id=""><h2 class="p1">我是标题2</h2><p class="c1 p1">我是段落3</p></div> --><!-- 4.后代选择器 --><!-- <p id="p1">我是段落1</p> --><!-- <div id=""><p id="p1">我是段落1</p></div> --><!-- <div id=""><p>我是段落1<p id="p1">我是段落2</p></p></div> --><!-- 5.父子选择器 --><h1 class="c1">我是标题1</h1><div id=""><p>我是段落1</p><p class="c1">我是段落2</p><p><font class="c1">我是文字1</font></p><div id=""><a href="" class="c1">我是超链接</a></div></div></body>
</html>
6.选择器的优先级
<!--选择器的优先级：选择器的优先级看选择器的权重值，谁的权重值大谁的优先级就高，如果权重值相同谁后执行谁的优先级就高，内联样式表的优先级最高。标签选择器：1class选择器：2id选择器：4可以在某个属性后加 !important 让当前属性的优先级最高(内联也比不上)-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.c2{color: green;}#p1{color: red;}p{color: blue;}#div2 p{background-color: #ADFF2F;}.c2 .c3 .c4 p{background-color: yellow !important;}</style></head><body><div id="div1" class="c1"><p class="c2" id="p1">我是段落1</p></div><div id="div2" class="c2"><div class="c3"><div class="c4"><p style="background-color: #FFA500;">我是段落3</p></div></div></div></body>
</html>
7.伪类选择器
<!--1.什么是伪类选择器伪类选择器选中的是标签的状态，可以让同一个标签在不同的状态下有不同的样式普通选择器:伪类选择器2.常见的伪类选择器link - 链接没有成功访问过对应的状态;（只针对超链接有效）visited - 链接已经访问过的对应的状态；（只针对超链接有效）hover - 鼠标悬停在标签上对应的状态；（针对所有可见标签有效）active - 鼠标按下没有弹起来的时候对应的状态;（针对所有可见标签有效）focus - 成为焦点对应的状态(正在操作某一个标签对应的状态)；（一般用于表单相关标签）-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">a{text-decoration: none;}a:link{color: #008000;}a:visited{color: darkgray;}a:hover{color: red;}a:active{color: yellow;}#div1{width: 100px;height: 100px;background-color: yellowgreen;}#div1:hover{width: 60px;height: 60px;}img:active{border: solid red 1px;}input{border: none;border-bottom: solid gray 1px;}input:focus{outline: none;border-bottom: solid blueviolet 2px;}</style></head><body><a id="a1" href="https://www.baidu.com">我是超链接</a><div id="div1"></div><img src="img/luffy.jpg" ><input type="password" name="" /></body>
</html>
8.CSS核心属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DAY4：CSS核心属性</title>
<style>
*{ margin:0; padding:0;}
body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微软雅黑";}
h1,h2{padding: 20px 0;}
h3{ background: #00AA88;color: #FFFCF4;font-size: 20px;font-weight: 700;margin: 10px 0;border-radius: 4px;padding: 5px 0px 5px 15px;}
p{ line-height: 40px;}
ul li{ list-style: none;line-height: 40px;}
span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;}
em{ font-style: normal; color:red;}
.other{ color:#044D22;}
.oo{ color:red; display:inline; font-size:18px; font-weight:normal;}
.marleft{ margin-left:30px;}
.marbtom{ margin:15px 0; font-weight:600;}
.borderbtm{ border-bottom: solid 1px #eee;padding-bottom: 15px;margin-bottom: 15px;}
.textcon{margin: 10px 0;border: solid 1px #ddd;border-left-width: 6px;padding: 10px;border-radius: 4px;border-color: #f60;}
.oos{ color:#000; font-weight:800;}
</style>
</head><body>
<div class="boxs"><h1>DAY4：CSS核心属性</h1><h2 class="borderbtm">学习目标</h2><ul ><li>1、css浮动属性详解</li><li>2、css文本属性</li><li>3、css列表属性</li><li>4、css背景属性</li><li>5、css边框属性</li></ul><h3>一、css浮动属性详解</h3><div class="marleft"></p><blockquote class="textcon"><strong class="oo"></strong><br>无论多么复杂的布局，<strong class="oo">其基本出发点均是：“如何在一行显示多个div元素”。</strong><br>显然标准流已经无法满足需求，这就要用到浮动。<br>浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。<br></p><p>1.什么是浮动元素的脱离文档流?</p><p>首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。</p><p>脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。</p><p>简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。</p></blockquote><blockquote class="textcon"><p><strong class="oo">浮动规律：</strong>假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。<br>div的顺序是HTML代码中div的顺序决定的。<br>靠近页面边缘的一端是前，远离页面边缘的一端是后。<br></p></blockquote><!-- <img src="data:images/pic5.png"/>--></p><p>2.浮动元素脱离文档流之后会有什么影响？</p><p>如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。</p><p><br>3.清除浮动是为了解决高度塌陷问题和元素重叠问题。<br></p><p>4.清除浮动的方法：</p><p>（1）添加空盒子，较流行。缺点是为清除浮动，页面添加的空盒子较多，会造成冗余代码，新手容易晕菜。 定义：在被浮动的元素（同级元素）后面添加一个空的div，并且定义一个类名，赋给空div。语法：.clear{clear:both;}</p><p>（2）overflow:hidden、较简单，兼容市面上大部分浏览器。缺点：做开发时，有些公司会严格要求开发技术点，不建议使用。 定义：先定义一个类名，然后把定义好的类名赋给浮动元素的父级元素。 语法：.clear{overflow:hidden;}</p><p>（3）最流行、最常用、可兼容所有浏览器。称为万能清除法。非要说缺点就是代码量大。开发推荐使用。 定义：定义一个类名，使用伪元素：after，并把类名赋给被浮动元素的父级元素。语法：clear：after{display:block;clear:both;content:".";visibility:hidden;height:0;}
clear{zoom:1;}</p><blockquote class="textcon"> <p><strong class="oo">对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。</strong></p></blockquote></div><h3>二、css文本属性</h3><div class="marleft"><p class="oo oos">1）文本大小：{font-size:value;}</p><blockquote class="textcon"><p>说明：<br>A） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。<br>B）单位还可以是pt，9pt=12px;<br>C）为了减小系统间的字体显示差异，IE Netscape(网景通信公司) Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px; </p><!--<p>D)使用绝对大小关键字<br>xx-small <br>x-small <br>small <br>medium <br>large <br>x-large<br>xx-large <br></p>--></blockquote><strong class="oo oos">2）文本颜色：{color:颜色值;}</strong><br><blockquote class="textcon">说明：<br>用十六进制(是计算机中数据的一种表示方法)表示颜色值：<br>0 1 2 3 4 5 6 7 8 9<br>0 1 2 3 4 5 6 7 8 9 A B C D E F<br>颜色模式：光色模式<br>
R G B<br>
FF 00 00<br>
颜色值的缩写：<br>
当表示三原色的三组数字同时相同时，可以缩写为三位;<br>
当用十六进制表示颜色值时，需要在颜色值前加“#”<br>
# fa 00 00<br>
</blockquote>
<strong class="oo oos">3)文本字体：{font-family:字体1，字体2，字体3；}</strong><br>
<blockquote class="textcon">
说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示； <br>
当字体是中文字体时，需加双引号；<br>
当英文字体中有空格时，需加双引号如（“Times New Roman”）<br>
当英文字体只有一个单词组成是不加双引号；如：（Arial）；<br>
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.<br>
</blockquote>
<strong class="oo oos">4)文字加粗</strong><br>
<blockquote class="textcon">
font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;<br>
说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，<br>
100-400 一般<br>
500常规字体<br>
600-900加粗字体 <br>
</blockquote>
<strong class="oo oos">5)文字倾斜</strong><br>
<blockquote class="textcon">
font-style：italic/oblique/normal（取消倾斜，常规显示）;<br>
说明：<br>
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.<br>
</blockquote>
<strong class="oo oos">6)水平对齐方式</strong><br>
<blockquote class="textcon">
{text-align:left/right/center<br>
</blockquote>
<strong class="oo oos">7)文字行高 {line-height:normal/value;}</strong></p>
<blockquote class="textcon"><p>说明：<br>A）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；<br>B) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；</p><p></p><p>C) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）</p></blockquote><blockquote class="textcon"><p><strong class="oo">*文字属性简写：font:12px/24px "宋体";</strong><br>font属性的简写：字号，行高，字体<br>font-size:12px; line-height:24px; font-family:”宋体”；<br>font属性的简写：<br>说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)<br>顺序: font-style font-weight font-size / line-height font-family<br>(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。<br>(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。<br></p></blockquote><p class="oo oos">8)文本修饰</p><blockquote class="textcon"><p>text-decoration:none/underline/overline/line-through<br>说明：<br>none:没有修饰<br>underline:添加下划线<br>overline:添加上划线<br>line-through:添加删除线</p></blockquote><p class="oo oos">9)首行缩进：{text-indent:value;}</p><blockquote class="textcon"><p>说明：首行缩进2个字 text-indent:2em;<br>A）text-indent可以取负值；<br>B）text-indent属性只对第一行起作用。<br></p></blockquote><p class="oo oos">10)字间距{letter-spacing:value;}</p><blockquote class="textcon"><p>控制英文字母或汉字的字距。（英文字母和字母）<br></p></blockquote></div><h3>三、css列表属性</h3><div class="marleft"><p class="oo oos">1)定义列表符号样式</p><blockquote class="textcon"><p>list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；list-style-type:none===list-style:none;</p></blockquote><p><strong class="oo oos">2)使用图片作为列表符号</strong><br><blockquote class="textcon">list-style-image：url(所使用图片的路径及全称)；<br></blockquote><strong class="oo oos">3)定义列表符号的位置</strong><br><blockquote class="textcon">list-style-position:outside(外边)/inside(里边)；</p><p>list-style:none;去掉列表符号 <br></p></blockquote></div><h3>四、css背景属性</h3><div class="marleft"><strong class="oo oos">1)背景颜色</strong><br><blockquote class="textcon">语法：选择符{background-color:颜色值;}<br></blockquote><strong class="oo oos"> 2)背景图片的设置</strong><br><blockquote class="textcon"><p>语法：background-image：url(背景图片的路径及全称)；</p><p>说明：<br><strong class="oo oos">网页上有两种图片形式：插入图片、背景图；</strong><br>插入图片：属于网页内容，也就是结构。<br>背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。</p><p class="oo">背景图片的显示原则:</p><p>A）容器尺寸等于图片尺寸，背景图片正好显示在容器中<br>
B）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；<br>
C）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。</p></blockquote><p><strong class="oo oos">3)背景图片平铺属性</strong><br><blockquote class="textcon">语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }<br>no-repeat:不平铺<br>repeat：平铺<br>repeat-x：横向平铺<br>repeat-y ：纵向平铺<br></blockquote><strong class="oo oos"> 4)背景图的固定</strong><br><blockquote class="textcon">语法：<br>选择符{background-attachment:scroll(滚动)/fixed(固定);}</p><p>说明：<br>fixed 固定，不随内容一块滚动；<br>scroll:随内容一块滚动。<br></p></blockquote><p> <strong class="oo oos"> 5)背景图片的位置</strong><br><blockquote class="textcon">语法：选择符<br>{background-position:left/center/right/数值 top/center/bottom/数值;}</p><p> 水平方向上的对齐方式（left/center/right）或值 <br>垂直方向上的对齐方式(top/center/bottom)或值</p><p>background-position:值1 值2;<br>两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。<br>当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置<br>说明：向左方向，向上方向是负值<br></p></blockquote><blockquote class="textcon">背景属性的缩写语法：<br>background:属性值1 属性值2 属性值3；<br>背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00；<br></blockquote><strong class="oo"> 网页上常用的图片格式（压缩图片）</strong><br><blockquote class="textcon">1)jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )。<br>2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;<br>3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;<br></p></blockquote></div><h3>五、css边框属性</h3><div class="marleft"><p>border:边框宽度 边框风格 边框颜色;<br>例如：border:5px solid #ff0000<br>边框：border,网页中很多修饰性线条都是由边框来实现的。<br>边框宽度：border-width:<br>边框颜色：border-color:<br><strong class="oo"> 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，</strong></p><p>border-bottom:边框宽度 边框风格 边框颜色;底边框<br>border-left:边框宽度 边框风格 边框颜色;左边框<br>border-right:边框宽度 边框风格 边框颜色;右边框<br>border-top:边框宽度 边框风格 边框颜色;上边框<br></p><p></p><p></p></div>
</div><div style=" width: 130px;
height: 45px;
line-height: 44px;
text-align: center;
color: #f00;
background: #000;
border-radius: 4px;
position: fixed;
bottom: 50px;
cursor:pointer;
right: 10px; "><a href="#" style="color:#f00; text-decoration:none;">返回顶部</a></div>
</body>
</html>
23-Web-表单和CSS基础相关推荐
- Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...
- 浅析Web表单美化CSS框架Topcoat
Topcoat同样是一款简洁的Web表单构建应用,和Semantic UI.BootMetro等CSS框架不同的是,Topcoat主要用于构建美化的Web表单,包括提交按钮.输入框.单选框/复选框.滑 ...
- 【Java Web前端开发】HTML表单和CSS部分
文章目录 HTML标签:表单标签 CSS:页面美化和布局控制 案例: HTML标签:表单标签 * 表单:* 概念:用于采集用户输入的数据的.用于和服务器进行交互.* form:用于定义表单的.可以定义 ...
- Flask之Web表单使用
Web表单使用 @(Flask) request对象包含客户端发出的所有请求信息. request.form能获取POST请求中提交的表单数据. 使用的包 Flask-WTF可以把处理Web表单的过程 ...
- python-flask(二)集成bootstrap、集成web表单、集成邮件发送
文章目录 一.flask集成bootstrap 1. 什么是Bootstrap? 2. Flask中如何集成Bootstrap? 3. Flask-Bootstrap实现了什么? 二.Flask中集成 ...
- HTML5期末考核大作业：美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制 ...
- HTML5期末考核大作业：美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript (1)
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制 ...
- HTML 表格、表单和CSS初识
表格.表单和CSS初识 一.提问 html骨架结构是什么 常用标签有哪些 图像标签有哪些属性,绝对路径和相对路径的区别 链接标签有哪些属性,说出各个属性的作用 列表标签分几种,分别是什么 二.本章任务 ...
- Flask Web表单
title: flask学习笔记 subtitle: 3. flask Web表单 date: 2018-12-14 10:17:28 --- Web表单 HTML表单是用户和web站点或应用程序之间 ...
- web表单设计:点石成金_如何设计安全的Web表单：验证，清理和控制
web表单设计:点石成金 While cybersecurity is often thought of in terms of databases and architecture, much of ...
最新文章
- ASP.NET获取客户端IP及MAC地址
- python基础05
- 使用yum命令安装mysql_Linux Centos 下使用yum 命令安装mysql实现步骤
- powershell目录带空格_powershell - 如何在命令行的路径中运行带有空格的powershell脚本？ - SO中文参考 - www.soinside.com...
- vmware：Cannot open the disk 'XXX' or one of the snapshot disks it depends on.
- POJ1209 UVA158 Calendar题解
- 渗透测试工程师前景_网络安全工程师教你：Kali Linux之Metasploit渗透测试基础（一）...
- linux和emwin的区别,emWin“自带软件GUIBuilder的使用”
- 20171018校内训练
- python 学生编程--3 多彩同心圆
- 自学编程的8个坑，你踩了几个？第七个坑87%都踩过！
- 桌面图标icon替换客制图标。图标要比原始图标大，要求一致。应用图标去掉四周白边,保持原有比例。
- 广告收入7年来首次下滑，千万粉UP主4个月无商单，自媒体还能好好恰饭吗？
- C语言/C++编程学习：C语言环境设置
- 第三方登录之微信登录
- zip、rar解压文件
- [心情故事]一九九九年的年终工作总结——318冒险日志之初心者の道场
- 水平集（Level Set）的基本方法
- POJ 2886:Who Gets the Most Candies?
- maven 3.8.1 安装及配置文件setting.xml
热门文章
- [229]python3的requests类抓取中文页面出现乱码的解决办法
- mysql出现2错误代码_MySQL 错误代码大全(2)
- [hive 报错]:FAILED: SemanticException Line 0:-1 Partition not found
- 软件测试新手入门该学什么？最全整理，照着学就对了
- 腾讯加入专利保护社区 OIN
- 支付宝/微信手机网站支付总结
- 求生之路2右下角显示服务器,求生之路2公网联机工具右下角刷不出服务器
- h5微信f分享链接给对方获取对方手机号_微信生日贺卡链接制作
- Python 处理Excel内的数据（案例介绍*2）
- window7取消文件默认打开方式的方法