整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML5 是最新的 HTML 標(biāo)準(zhǔn)。
HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計為在不同類型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運行。
CSS 是一種描述 HTML 文檔樣式的語言。
CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁的樣式和布局。
CSS3 是最新的 CSS 標(biāo)準(zhǔn)。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。
要實現(xiàn)如下效果：
HTML5:
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。使用說明 | |
line-break | 用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： |
word-wrap | 允許長單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： |
word-break | 定義文本自動換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： |
white-space | 設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： |
要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: -1px -1px white,
1px 1px #333;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: 1px 1px white,
-1px -1px #333;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}要實現(xiàn)的效果：
CSS3：
#demo {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}要實現(xiàn)的效果：
CSS3和HTML5：
<style type="text/css">
.bubble {
width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
height: 50px;
background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
padding: 12px; /*增加補(bǔ)白，防止消息文本跑到框外*/
position: relative; /*定義定位包含框，方便定位箭頭*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*圓角*/
}
.bubble:before {
content: ""; /*不顯示任何內(nèi)容*/
width: 0; /*定義箭頭內(nèi)容區(qū)大小*/
height: 0;
position: absolute; /*絕對定位*/
z-index:-1; /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
right: 90%;
top: 50%;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg); /*定位箭頭傾斜角度*/
/*定義箭頭長短、粗細(xì)*/
border-top: 20px solid transparent;
border-right: 80px solid hsla(93,96%,62%,1);
border-bottom: 20px solid transparent;
}
div {
margin:50px;
}
<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>要實現(xiàn)的效果：
CSS3：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
background-size: 100% 30px;
position: relative;
}
body:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}需要實現(xiàn)的效果：
CSS3：
.box {
background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
color: #fff;
padding: 12px 24px;
}<script>
function setTab(cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById("tab_"+i);
var con=document.getElementById("con_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<div id="tab">
<div class="Menubox">
<ul>
<li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
<li id="tab_2" onclick="setTab(2,4)">搞笑</li>
<li id="tab_3" onclick="setTab(3,4)">美女</li>
<li id="tab_4" onclick="setTab(4,4)">攝影</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_1" class="hover" ><img src="images/1.png" /></div>
<div id="con_2" class="hide"><img src="images/2.png" /></div>
<div id="con_3" class="hide"><img src="images/3.png" /></div>
<div id="con_4" class="hide"><img src="images/4.png" /></div>
</div>
</div>
</body>CSS3：
tbody tr:nth-child(2n) {
background-color: #f5fafe;
}圓角表格的CSS3：
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}單線表格的CSS3：
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}設(shè)計圖片翹邊陰影效果：
CSS3：
.box {
width: 980px;
clear: both;
overflow: hidden;
height: auto;
margin: 20px auto;
}
.box li {
background: #fff;
float: left;
position: relative;
margin: 20px 10px;
border: 2px solid #efefef;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
left: 21px;
background: transparent; /*透明背景*/
z-index: -2; /*顯示在照片的下面*/
box-shadow: 0 8px 20px rgba(0,0,0,0.8); /*添加陰影*/
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(-12deg) rotate(-6deg); /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
-webkit-transform: skew(-12deg) rotate(-6deg);
-moz-transform: skew(-12deg) rotate(-6deg);
-os-transform: skew(-12deg) rotate(-6deg);
-o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
right: 21px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(12deg) rotate(6deg);
-webkit-transform: skew(12deg) rotate(6deg);
-moz-transform: skew(12deg) rotate(6deg);
-os-transform: skew(12deg) rotate(6deg);
-o-transform: skew(12deg) rotate(6deg);
}
<ul class="box">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
</ul>ref
《HTML5+CSS3+JavaScript從入門到精通（實例版）》
-End-
果圖
各位朋友大家好，
今天給大家?guī)淼氖?CSS3墨水噴墨特效源碼！
是不是很炫酷，大家可以按照自己的意愿進(jìn)行修改！
有想要文件版源碼的 可以私聊小編哦
廢話不多說，上源碼！
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
果圖
各位長友大家早上好！
今天給大家?guī)淼氖?中國地圖導(dǎo)航特效源碼！
適合各種地圖介紹導(dǎo)航！
大家可以按照自己的意愿進(jìn)行修改！
有想要文件版源碼的朋友 可以在以往的文章中找到我的聯(lián)系
廢話不多說，上源碼！
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif;}
/* b_map */
.b_map{ margin-top:20px;padding-right:20px;width:704px;background:url(../img/chinamap.jpg) no-repeat 0px 0px;height:549px}
.e_map_tags{z-index:1;position:relative}
.e_map_tags li{width:90px;height:25px;z-index:1;position:absolute;text-align:center;padding-bottom:8px;display:block;font:bold 14px/25px simsun, arial, sans-serif;background:url(../img/map_tag1.png) no-repeat 0px 0px;color:#fff;top:0px;cursor:pointer;left:0px}
.e_map_tags .m_beijing{top: 371px;left: 316px;}
.e_map_tags .m_shanghai{top: 370px;
left: 589px;}
.e_map_tags .m_guangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top:314px;left:293px}
.e_map_tags .m_chengdu{top:230px;left:223px}
.e_map_tags .m_xian{top:190px;left:290px}
.e_map_tags .m_xianggang{top:320px;left:345px}
.e_map_tags .m_hangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top: 467px;
left: 415px;}
.e_map_tags li:hover{background-position:0px -38px}
.e_map_tags li.hover,.e_map_tags .centers{background-position:0px -38px}
.e_map_info{z-index:2;position:relative}
.e_map_info .m_content{z-index:1;border:#ccc 1px solid;position:absolute;padding:15px 20px;background-color:#fff;width:280px;display:block;top:0px;left:0px}
.e_map_info .hide{display:none;}
.e_map_info .m_content i{z-index:1;position:absolute;width:8px;bottom:-8px;display:block;background:url(../img/map_idx1.png) no-repeat 0px 0px;height:8px;overflow:hidden;right:-1px;_right:-2px}
.e_map_info .m_content h4{padding-left:180px;font:16px/33px "microsoft yahei", simsun, arial, sans-serif;margin-bottom:18px;background:url(../img/map_qunar.jpg) no-repeat 0px 0px;height:50px;}
.e_map_info .m_content p{font:14px/22px simsun, arial, sans-serif}
.e_map_info .m_beijing{top: 83px;left: 748px;}
.e_map_info .m_shanghai{top: 83px;
left: 748px;}
.e_map_info .m_guangzhou{top:176px;left:-58px}
.e_map_info .m_chengdu{top:92px;left:-127px}
.e_map_info .m_xian{top:74px;left:-60px}
.e_map_info .m_xianggang{top:204px;left:-4px}
.e_map_info .m_hangzhou{top: 83px;
left: 748px;}
/*m_content_side*/
.m_content_side{ height:1px;width:100%; position:relative;}
.m_content_side a{ position:absolute;top:0; z-index:2;float:left;width:30px; height:30px;}
.m_content_side a img{width:30px; height:30px;}
.m_content_side a.m_left{left:0px;}
.m_content_side a.m_right{right:0;}
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
