欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

网页设计学习笔记(1)

程序员文章站 2022-06-30 19:38:59
3 添加标题图片 首先,要加入图标,需要.ico格式的图片才可以。 可以在:http://www.bitbug.net/ 这里上传图片,制成.ico格式的文件。 然后在html的标签中插入:

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