整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
給大家看一張喜歡的圖片，緩解下心情，最近敲敲代碼累的時(shí)候都會(huì)看看這幾個(gè)小活寶，每次都忍不住伸手去摸一下屏幕，可愛(ài)到爆，不由自主的就笑了出來(lái)。這個(gè)是電影《鼠來(lái)寶》系列的海報(bào)圖。不知道有沒(méi)有人喜歡這幾只會(huì)唱歌的小活寶。
這幾天看了 一下之前整理的html和css的知識(shí)點(diǎn)，發(fā)現(xiàn)很多東西都有點(diǎn)忘了，趁此機(jī)會(huì)，復(fù)習(xí)了一下，也重新整理了一下，決定放出來(lái)，也給剛?cè)腴T(mén)的孩紙們一個(gè)參考，之前有簡(jiǎn)友說(shuō)圖片看不清，電腦的話可以點(diǎn)擊放大，或者另存為，放大還是挺清楚的，手機(jī)app也可以下載圖片或者放大，其實(shí)可以下載下來(lái)，地鐵上或者等人的時(shí)候，拿出手機(jī)看一看，感覺(jué)還可以。
第一張 HTML基本結(jié)構(gòu)與css選擇器
主要介紹html的基本結(jié)構(gòu)和css選擇器，話不多說(shuō)，都在圖里。
基本概括.png
第二張 html常用基本標(biāo)簽
html基本標(biāo)簽
已分類(lèi)，需要注意的部分已標(biāo)注。看完這一張，還有下一張。
HTML標(biāo)簽.png
第三張 CSS的常用屬性
主要介紹css的屬性
css屬性.png
第四張 表格和表單
表格和表單.png
第五張 浮動(dòng)、定位、overflow
浮動(dòng)、定位、overflow.png
第六張 補(bǔ)充小知識(shí)
小知識(shí).png
最后給大家給大家詳細(xì)說(shuō)一下border-radius的用法
普通用法不做詳細(xì)介紹；
其實(shí)我們?cè)O(shè)置border-radius參數(shù)的時(shí)候，最多可以設(shè)置8個(gè)參數(shù)，每個(gè)參數(shù)的位置和代指圓角方向已經(jīng)在圖上表明；簡(jiǎn)單明了。
示意圖.jp
下面放一張我主要用 border-radius 畫(huà)的一個(gè)小企鵝（命名比較low，可以忽略 。）
最后的效果圖
html標(biāo)簽部分
<div class="qie"> <!-- 頭部 --> <div class="tou"> <div class="eye_1"> <div class="eye_1_1"></div> </div> <div class="eye_2"> <div class="eye_2_1"></div> <div class="eye_2_2"></div> </div> <div class="zui"></div> <div class="tou_2"></div> </div> <!-- 圍巾 --> <div class="weijin"> <div class="weijin_left"></div> <div class="weijin_content"></div> <div class="weijin_right"></div> <div class="weijin_bottom"></div> <div class="weijin_1"></div> </div> <!-- 身體 --> <div class="body"> <div class="duzi"></div> <div class="hand"></div> <div class="hand_2"></div> </div> <!-- 腳 --> <div class="footer"></div> </div>
css樣式部分
.qie{
margin-left: auto;
margin-right: auto;
width: 200px;
}
.tou{
height: 80px;
width: 120px;
background-color: #000;
border-radius: 60px 60px 0px 0px;
position: relative;
}
.eye_1,.eye_2{
width: 20px;
height: 30px;
background-color: #fff;
border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;
}
.eye_1{
position: absolute;
left: 35px;
top: 25px
}
.eye_2{
position: absolute;
right:35px;
top: 25px;
}
.eye_1_1{
height: 13px;
width: 10px;
background-color: #000;
border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;
position: absolute;
left: 9px;
top:10px;
}
.eye_2_1{
height: 6px;
width: 15px;
background-color: #000;
border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;
position: absolute;
left: 2px;
top: 12px;
}
.eye_2_2{
width: 13px;
height: 6px;
background-color: #fff;
border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;
position: absolute;
left: 3px;
top: 14px;
}
.zui{
height: 20px;
width: 72px;
background-color: #ffad00;
border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;
position: absolute;
left: 23px;
top: 58px;
}
.tou_2{
height: 10px;
width: 120px;
background-color: #000;
position: absolute;
top: 80px;
border-radius: 0 0 62px 62px/ 0 0 10px 10px;
z-index: 3;
}
.weijin{
position: relative;
z-index: 2;
}
.weijin_left{
height: 0px;
width: 0px;
border-style: solid;
border-width: 10px 5px;
border-color: transparent #e91f1f #e91f1f transparent ;
position: absolute;
left: -9px;
}
.weijin_content{
height: 20px;
width: 120px;
background-color: #e91f1f;
}
.weijin_right{
height: 0px;
width: 0px;
border-style: solid;
border-width: 10px 5px;
border-color: transparent transparent #e91f1f #e91f1f ;
position: absolute;
left: 120px;
bottom:0px;
}
.weijin_bottom{
height: 10px;
width: 140px;
background-color: #e91f1f;
border-radius: 0 0 70px 70px/0 0 10px 10px;
position: absolute;
left: -10px
}
.weijin_1{
height: 30px;
width: 24px;
background-color: #e91f1f;
position: absolute;
left: 20px;
}
.body{
height: 85px;
width: 120px;
background-color: #000;
border-radius: 0 0 60px 60px/0 0 50px 50px;
position: relative;
z-index: 1
}
.duzi{
height: 78px;
width: 90px;
background-color: #fff;
border-radius: 0 0 45px 45px/0 0 45px 45px;
position: absolute;
left: 15px;
}
.hand{
height: 54px;
width: 20px;
background-color:#000;
z-index: 4px;
position: absolute;
left: -18px;
top: -4px;
border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;
}
.hand_2{
height: 54px;
width: 20px;
background-color:#000;
z-index: 4px;
position: absolute;
right: -18px;
top: -4px;
border-radius:0px 18px 2px 18px / 0px 52px 2px 28px
}
.footer{
height: 16px;
width: 120px;
background-color: #fcb117;
border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;
position: relative;
bottom: 16px;
}
如果看的不舒服，合在一起給你看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.qie{
margin-left: auto;
margin-right: auto;
width: 200px;
}
.tou{
height: 80px;
width: 120px;
background-color: #000;
border-radius: 60px 60px 0px 0px;
position: relative;
}
.eye_1,.eye_2{
width: 20px;
height: 30px;
background-color: #fff;
border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;
}
.eye_1{
position: absolute;
left: 35px;
top: 25px
}
.eye_2{
position: absolute;
right:35px;
top: 25px;
}
.eye_1_1{
height: 13px;
width: 10px;
background-color: #000;
border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;
position: absolute;
left: 9px;
top:10px;
}
.eye_2_1{
height: 6px;
width: 15px;
background-color: #000;
border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;
position: absolute;
left: 2px;
top: 12px;
}
.eye_2_2{
width: 13px;
height: 6px;
background-color: #fff;
border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;
position: absolute;
left: 3px;
top: 14px;
}
.zui{
height: 20px;
width: 72px;
background-color: #ffad00;
border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;
position: absolute;
left: 23px;
top: 58px;
}
.tou_2{
height: 10px;
width: 120px;
background-color: #000;
position: absolute;
top: 80px;
border-radius: 0 0 62px 62px/ 0 0 10px 10px;
z-index: 3;
}
.weijin{
position: relative;
z-index: 2;
}
.weijin_left{
height: 0px;
width: 0px;
border-style: solid;
border-width: 10px 5px;
border-color: transparent #e91f1f #e91f1f transparent ;
position: absolute;
left: -9px;
}
.weijin_content{
height: 20px;
width: 120px;
background-color: #e91f1f;
}
.weijin_right{
height: 0px;
width: 0px;
border-style: solid;
border-width: 10px 5px;
border-color: transparent transparent #e91f1f #e91f1f ;
position: absolute;
left: 120px;
bottom:0px;
}
.weijin_bottom{
height: 10px;
width: 140px;
background-color: #e91f1f;
border-radius: 0 0 70px 70px/0 0 10px 10px;
position: absolute;
left: -10px
}
.weijin_1{
height: 30px;
width: 24px;
background-color: #e91f1f;
position: absolute;
left: 20px;
}
.body{
height: 85px;
width: 120px;
background-color: #000;
border-radius: 0 0 60px 60px/0 0 50px 50px;
position: relative;
z-index: 1
}
.duzi{
height: 78px;
width: 90px;
background-color: #fff;
border-radius: 0 0 45px 45px/0 0 45px 45px;
position: absolute;
left: 15px;
}
.hand{
height: 54px;
width: 20px;
background-color:#000;
z-index: 4px;
position: absolute;
left: -18px;
top: -4px;
border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;
}
.hand_2{
height: 54px;
width: 20px;
background-color:#000;
z-index: 4px;
position: absolute;
right: -18px;
top: -4px;
border-radius:0px 18px 2px 18px / 0px 52px 2px 28px
}
.footer{
height: 16px;
width: 120px;
background-color: #fcb117;
border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;
position: relative;
bottom: 16px;
}
</style>
</head>
<body>
<div class="qie">
<!-- 頭部 -->
<div class="tou">
<div class="eye_1">
<div class="eye_1_1"></div>
</div>
<div class="eye_2">
<div class="eye_2_1"></div>
<div class="eye_2_2"></div>
</div>
<div class="zui"></div>
<div class="tou_2"></div>
</div>
<!-- 圍巾 -->
<div class="weijin">
<div class="weijin_left"></div>
<div class="weijin_content"></div>
<div class="weijin_right"></div>
<div class="weijin_bottom"></div>
<div class="weijin_1"></div>
</div>
<!-- 身體 -->
<div class="body">
<div class="duzi"></div>
<div class="hand"></div>
<div class="hand_2"></div>
</div>
<!-- 腳 -->
<div class="footer"></div>
</div>
</body>
</html>
字少，圖多，還請(qǐng)想學(xué)習(xí)的朋友們耐心點(diǎn)。
雖然我不是什么大神，但是我還是想把我知道的都分享出來(lái)讓大家學(xué)習(xí)
有喜歡的可以點(diǎn)個(gè)關(guān)注支持我一下哦，想一起學(xué)習(xí)的可以看一下我的微頭條里面有一個(gè)技術(shù)群
近用CSS設(shè)計(jì)LOGO上癮了，前兩天分享了《教你使用純CSS設(shè)計(jì)HTML5新LOGO》和《教你使用CSS3設(shè)計(jì)Opera瀏覽器LOGO》，今天在微博上看到有新浪的朋友用CSS3實(shí)現(xiàn)的新浪微博LOGO（如下圖所示），一時(shí)手癢，就順手也用CSS3實(shí)現(xiàn)了一個(gè)QQ的LOGO。
?
目前只支持Chrome觀看，效果如下圖所示：
主要用到的CSS3屬性如下所示：
1、border-radius
CSS3中應(yīng)用最普遍的屬性，用于設(shè)置邊框圓角，可以采用border-top-left-radius的方式單獨(dú)設(shè)置每個(gè)圓角，并可以設(shè)置。
1）例如要實(shí)現(xiàn)1個(gè)圓，可以使用如下代碼：
width: 240px;
height: 240px;
-webkit-border-radius: 120px;
效果如下圖所示：
2）要實(shí)現(xiàn)1/4個(gè)圓，可以用如下代碼：
width: 240px;
height: 240px;
-webkit-border-bottom-left-radius: 240px 240px;
效果如下圖所示：
3）要實(shí)現(xiàn)1/8個(gè)圓，可以用如下代碼：
border-top: 240px solid #2ec8e9;
-webkit-border-top-left-radius: 240px;
width: 240px;
2、-webkit-transform
主要使用了rotate旋轉(zhuǎn)屬性，可以控制元素向左向右旋轉(zhuǎn)。下圖里的箭頭就是用-webkit-transform:rotate屬性實(shí)現(xiàn)的。順便提一句scale縮放屬性里如果值為-1，也是有旋轉(zhuǎn)效果的。
3、-webkit-box-shadow
盒陰影，可以設(shè)置元素的陰影。如上圖所示。
4、RGBA
RGBA也是CSS3中非常實(shí)用和強(qiáng)大的一個(gè)功能，以前所有使用RGB HTML的地方都可以使用RGBA的格式來(lái)設(shè)置透明度。例如QQ瀏覽器的九宮格可以做成如下顯示方式：
這就是采用RGBA的透明效果實(shí)現(xiàn)的，具體實(shí)現(xiàn)方式可以參考《瀏覽器九宮格的簡(jiǎn)單實(shí)現(xiàn)》一文。
用CSS打造QQ標(biāo)志設(shè)計(jì)教程分享完成，那么，你會(huì)了嗎？不會(huì)也沒(méi)關(guān)系，用logofree商標(biāo)在線制作器也可以直接生成類(lèi)似LOGO，如果生成的標(biāo)志還不滿意，那LOGO高端定制是您的最佳選擇。
轉(zhuǎn)載：http://www.logofree.cn/news/shejizhishixuexi/css3qqlogo.html
虎Q綁查詢(xún)工具是一款QQ賬號(hào)信息查詢(xún)工具，用戶(hù)能夠通過(guò)輸入QQ賬號(hào)或者手機(jī)號(hào)碼進(jìn)行查詢(xún)，可查找到其綁定的賬號(hào)。軟件有著簡(jiǎn)便的操作界面，只需幾個(gè)簡(jiǎn)單的步驟即可完成號(hào)碼的查詢(xún)，并且軟件為綠色版本，無(wú)需用戶(hù)進(jìn)行安裝，解壓之后便可立即使用。
來(lái)源：http://www.3h3.com/soft/271811.html
1.提供最新查詢(xún)接口可供選擇。
2.支持通過(guò)手機(jī)號(hào)來(lái)查詢(xún)綁定的QQ號(hào)碼。
3.支持通過(guò)QQ號(hào)碼來(lái)查詢(xún)綁定的手機(jī)號(hào)。
輸入查詢(xún)的手機(jī)號(hào)或者是QQ號(hào)碼，然后選擇查詢(xún)接口，在點(diǎn)擊查詢(xún)功能就可以進(jìn)行查詢(xún)了。
查詢(xún)出來(lái)的結(jié)果可以支持復(fù)制。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
