3 添加標題圖片 首先,要加入圖標,需要.ico格式的圖片才可以。 可以在:http://www.bitbug.net/ 這裡上傳圖片,製成.ico格式的文件。 然後在html的<head>標簽中插入: <link rel="shortcut icon" href="WEB-INF/favicon. ...
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將塊級元素轉為單元格元素