网页设计学习笔记（1）
2018-06-24 02:16:02来源：未知 阅读 ()
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将块级元素转为单元格元素
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：html 笔记
下一篇：html之head标签
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发，有什么好的发展方向吗？ 2020-06-09
- 转行前端很迷茫，该怎么学习？ 2020-06-06
- 前端学习记录 2020-06-05
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
