澳门新葡亰553311b > 新葡亰 计算机网络 > 网页设计学习笔记(1),网页设计学习笔记

网页设计学习笔记(1),网页设计学习笔记
2019-12-17 03:13

7 单元格之间消除空隙

(1)

<style>

table{ border-collapse:collapse; }

<style>

(2)

<table border="0" cellspacing="0" cellpadding="0">

<!—cellpadding可以理解为使单元格四周变大-->

2->栅格系统 (.col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12]和.col-lg-[1-12])

网页设计学习笔记(1),网页设计学习笔记

3> 编写页面

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属性设置默认值

图片 1

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%;

<!DOCTYPE html><html><head><title>首页 - 用户列表页面</title><link rel="shortcut icon" href="/static/img/favicon.png" /><link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/><script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script><style>.bodercss{border: 1px solid #00f;}</style></head><body><!--布局容器--><div style="border:1px solid red"><p>这是container布局</p><p>.container 类用于固定宽度并支持响应式布局的容器。</p></div><div style="border:1px solid #0f0"><p>container-fluid</p><p>.container-fluid 类用于 100% 宽度,占据全部视口的容器。</p></div> <!--栅格布局部分--><div ><div ><div >1</div><div >2</div><div >3</div><div >4</div><div >5</div><div >6</div><div >7</div><div >8</div><div >9</div><div >10</div><div >11</div><div >12</div></div><div ><div >2</div><div >4</div><div >6</div><div >8</div><div >10</div><div >12</div></div><div ><div >3</div><div >6</div><div >9</div><div >12</div></div><div ><div >4</div><div >4</div><div >4</div></div><div ><div >4</div><div >8</div></div><div ><div >6</div><div >12</div></div><div ><div >12</div></div></div><!--表单控件--><div ><form><div ><label for="text">文本:</label><input type="text" placeholder="文本"></div><div ><label for="number">数字:</label><input type="number" placeholder="数字"></div><div ><label for="datetime">时间:</label><input type="datetime" placeholder="时间"></div><div ><label for="tel">电话:</label><input type="tel" placeholder="电话"></div><div ><label for="email">邮箱:</label><input type="email" placeholder="邮箱"></div><div ><label for="password">密码</label><input type="password" placeholder="密码"></div><div ><label for="exampleInputFile">上传文件</label><input type="file" ><p >上传文件</p></div><div ><label><input type="checkbox" value="option1" />多选A</label><label><input type="checkbox" value="option1"/>多选B</label></div><div ><label><input type="radio" name="blankRadio" value="option1"/>单选A</label><label><input type="radio" name="blankRadio" value="option1"/>单选B</label></div><select ><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><button type="submit" >提交</button><button type="reset" >重置</button></form></div><!--按钮样式--><div style="margin-top:20px;"><button type="button" >Default</button><button type="button" >Primary</button><button type="button" >Success</button><button type="button" >Info</button><button type="button" >Warning</button><button type="button" >Danger</button><button type="button" >Link</button></div><!--图片形状--><div style="margin-top:20px;"><img src="/static/img/1.jpg" style="width:200px;height:200px;" ><img src="/static/img/2.jpg" style="width:200px;height:200px;" ><img src="/static/img/3.jpg" style="width:200px;height:200px;" ></div></body></html>

3 添加标题图片

首先,要加入图标,需要.ico格式的图片才可以。

可以在:    这里上传图片,制成.ico格式的文件。

然后在html的<head>标签中插入:

  <link rel="shortcut icon" href="WEB-INF/favicon.ico" type="image/x-icon"/>  

若插入之后不显示,重启浏览器即可。

4> 运行页面效果如下:

.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将块级元素转为单元格元素

3 添加标题图片 首先,要加入图标,需要.ico格式的图片才可以。 可以在: 这...

图片 2

6 bootstrap小技巧

自带的class属性img-responsive可以使太大的图片正好适应屏幕。

其它简单学习bootstrap方法地址:

图片 3

图片 4

1->布局容器(.container和.container-fluid)

图片 5

3->表单控件 (.form-group和.form-control)

BootStrap布局

1->布局容器

1> 下载地址:

图片 6

2> Bootstrap常用的布局样式介绍

上一篇:liunx 安装 docker 7版本教程,liunxdocker 下一篇:没有了