网页设计学习笔记（1）
3 添加标题图片
首先，要加入图标，需要.ico格式的图片才可以。
可以在：http://www.bitbug.net/ 这里上传图片，制成.ico格式的文件。
然后在html的<head>标签中插入：
<link rel="shortcut icon" href="WEB-INF/favicon.ico" type="image/x-icon"/>
若插入之后不显示，重启浏览器即可。
4 多行文本框、单复选框和下拉框
多行文本框后面可直接加一个required表示其必须填写，placeholder预设内容
<textarea rows="3" cols="20" placeholder="请介绍自己...">
网站建设教程。
</textarea>
单选和复选类似：
<label><input type="radio" name="indoor-outdoor" checked</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
下拉框例子：
例如： <select class="form-control" id="numbers">
<option value="1">数字1</option>
<option value="2" selected>数字2</option>
</select>
$("#numbers option:selected").val(); 获取到下拉框被选中的optionde value值：2；
$("#numbers option:selected").text(); 获取到下拉框被选中的optionde 文本内容：数字2；
可以不加label标签，添加一个value属性设置默认值
5 css样式覆盖及常识
!impotant>内联>Id>class>链接
例如：color: pink !important;
不用16进制设定颜色：background-color: rgb(0, 255, 0);
如果需要设置透明度则（0-1,越小透明度越高）：background-color: rgba(0, 255, 0,0.2);
设置图片或边框圆角度（50以上即为圆）：border-radius: 50%;
6 bootstrap小技巧
自带的class属性img-responsive可以使太大的图片正好适应屏幕。
其它简单学习bootstrap方法地址：
https://www.w3cschool.cn/codecamp/list?pename=responsive_design_with_bootstrap_camp
7 单元格之间消除空隙
（1）
<style>
table{ border-collapse:collapse; }
<style>
（2）
<table border="0" cellspacing="0" cellpadding="0">
<!—cellpadding可以理解为使单元格四周变大-->
.8 图片和文字居中
左右居中方法：
<div style="width:500px;text-align:center;">
<img src="" width="300"
style="display:block;margin:0 auto;"/>sdf
</div>
上下居中方法：
可以先用行高把文字上下居中再用
vertical-align: middle;把图片和文字垂直居中显示
如果没用可在后面加个!import或者在适当的位置加上display:table-cell将块级元素转为单元格元素
上一篇： 只是多喝水
下一篇： 盘点那些双11提前大促的国产人气机王