网页设计学习笔记(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将块级元素转为单元格元素

posted @ 2018-02-18 18:31 兰亭序乱 阅读(...) 评论(...) 编辑 收藏