當前位置：首頁 » 編程語言 » htmlcss效果

htmlcss效果

發布時間: 2021-03-23 23:49:23

㈠ html css樣式寫法有幾種

官方說的只有一種，元素選擇器{屬性:值;...}，具體可以參考官方文檔

㈡ html+css這個列表效果怎樣做出來的

可以看看這個效果，http://bbs.miaov.com/forum.php?mod=viewthread&tid=228&highlight=%E8%8F%9C%E5%8D%95

㈢ html css這種效果怎麼做

簡單的話，可以直接添加三張圖片。

㈣ css和html樣式的優點和缺點

HTML優點和缺點
優點：1.簡單易學2.結構與缺陷瀏覽器也能讀得懂
缺點：1.雜亂的結構，可讀性低2.只能對文本進行排版，而且HTML樣式使用標准文本標識，不能創建一些特殊效果
CSS優點和缺點
優點：1，CSS對於設計者來說是一種簡單、靈活、易學的工具，能使任何瀏覽器都聽從指令，知道該如何顯示元素及其內容
2，個樣式表可以用於多個頁面，甚至整個站點，因此具有更好的易用性和擴展性
3，使用CSS樣式表定義整個站點，可以大大簡化網站建設，減少設計者的工作量
缺點：1.瀏覽器支持的不一致性 2.CSS沒有父層選擇器3.不能明確地指定繼承性4.垂直控制的局限 5.顯示的缺乏6.缺乏正交性

㈤ html這個div效果怎麼實現CSS，JS都行--在線等

效果：

HTML代碼：

<div class="activityBox">
<ul class="activityTab">
<li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣專區</li>
<li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">團購推薦</li>
<li id="BeautyTuan" class="">特賣推薦</li>
</ul>
<ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
中間內容區 </ul>
<ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
中間內容區 </ul>
<ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
中間內容區 </ul>
</div>

JS代碼：

$(function(){ //左右切換效果
$(".activityTab li").live("hover",function(){
$(".activityTab li").removeClass("active");
$(this).addClass("active");
$(".activityCenter").css("display","none"); var activityTabID=$(this).attr("id");
$("#"+activityTabID+"Center").show(); return false;
});
});

註：素材來源於網路，版權歸作者所有。以上代碼僅供參考。

㈥ CSS和html如何實現這個效果

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>淘寶購買</title>
<style>
.taobao{width:224px;height:224px;position:relative;z-index:0;overflow:hidden;cursor:pointer}
.taobao.img{display:block;position:relative;z-index:0;}
.taobaoa{display:none;height:20px;text-align:center;background:red;color:#fff;text-decoration:none;font-weight:bold;font-family:"新宋體";font-size:16px;line-height:20px;margin:auto15px;margin-top:-102px;position:relative;z-index:1000;}
.zhezao{opacity:0.2;position:relative;z-index:100;height:100%;width:100%;margin-top:-100%;display:none;background:#333}
.taobao:hovera,.taobao:hover.zhezao{display:block;}
</style>
</head>
<body>
<divclass="taobao">
<imgsrc="1.png">
<divclass="zhezao"></div><ahref="#"target="_blank">去淘寶購買</a>
</div>
</body>
</html>

隨便做了個演示，你根據你自己的要求完善一下！

例外，由於時間緊張，在ie下運行正常，其他瀏覽器，你在測試修改下！

下面是效果圖：

㈦ html+css怎麼做出這樣的效果

css可以用hover實現。
移動端的點擊會顯示hover的樣式效果，所以可以直接用hover實現，如：「div:hover{background-color:green;}」。
如果要兼容pc端需要使用js實現，點擊的時候動態改變背景顏色。

㈧ HTML+css效果

這個是一個純css寫的，其他方法還有很多。

<!doctypehtml>
<html>
<head>
	<title>Welcome</title>
	<metahttp-equiv="pragma"content="no-cache">
	<metahttp-equiv="imagetoolbar"content="no"/>
	<metaname="format-detection"content="telephone=no"/>
	<metahttp-equiv="Content-type"content="text/html;charset=utf-8">
	<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<style>
		*	{padding:0px;margin:0px;outline:none;}
		article{border-top:none;display:-webkit-box;height:100%;position:relative;width:300px;margin:50pxauto0;}
		article>section:nth-child(1)a{left:0px;position:absolute;}
		article>section:nth-child(2)a{left:101px;position:absolute;}
		article>section:nth-child(3)a{left:202px;position:absolute;}
		article>section{width:304px;padding:10px0;position:absolute;left:0px;}
		article>sectiona{color:#333;text-decoration:none;display:block;list-style:none;-webkit-box-flex:1;font-size:12px;line-height:30px;text-align:center;background:#f1f1f1;border:1pxsolid#ccc;width:100px;z-index:100;}
		article>section>section{top:41px;position:absolute;background:#fff;border:1pxsolid#ccc;border-top:none;padding:10px0;}
		article>sectionp{font:12px/1.7simsun;padding:010px;text-indent:2em;}
		section:target{z-index:99;}
		section:targeta{background:#fff;border-bottom:none;}
	</style>
</head>
<body>
		<article>
			<sectionid="tab1">
				<ahref="#tab1">菜單一</a>
				<section>
					<p>榜妹：#標配問題#拾文化是哪一天開始運營的？現在有多少關注者？拾文化團隊有多少人？大家怎麼分工呢？</p>
					<p>拾文化：拾文化從2012年3月開始運營，現在總共有50萬左右關注者，團隊不大，12個人，以編輯為主，還有技術一名、設計兩名、BD兩名，以及打雜的我。</p>
					<p>榜妹：#標配問題#從開始運營到現在，拾文化的內容模式經歷過幾個發展階段，粉絲出現過幾次增長高峰，是哪些原因呢？</p>
				</section>
			</section>
			<sectionid="tab2">
				<ahref="#tab2">菜單二</a>
				<section>
					<p>拾文化：拾文化從2012年3月開始運營，現在總共有50萬左右關注者，團隊不大，12個人，以編輯為主，還有技術一名、設計兩名、BD兩名，以及打雜的我。</p>
					<p>榜妹：#標配問題#拾文化是哪一天開始運營的？現在有多少關注者？拾文化團隊有多少人？大家怎麼分工呢？</p>
					<p>榜妹：#標配問題#從開始運營到現在，拾文化的內容模式經歷過幾個發展階段，粉絲出現過幾次增長高峰，是哪些原因呢？</p>
				</section>
			</section>
			<sectionid="tab3">
				<ahref="#tab3">菜單三</a>
				<section>
					<p>榜妹：#標配問題#從開始運營到現在，拾文化的內容模式經歷過幾個發展階段，粉絲出現過幾次增長高峰，是哪些原因呢？</p>
					<p>拾文化：拾文化從2012年3月開始運營，現在總共有50萬左右關注者，團隊不大，12個人，以編輯為主，還有技術一名、設計兩名、BD兩名，以及打雜的我。</p>
					<p>榜妹：#標配問題#拾文化是哪一天開始運營的？現在有多少關注者？拾文化團隊有多少人？大家怎麼分工呢？</p>
				</section>
			</section>
		</article>
</body>
</html>

㈨ html 5 和css 能做出什麼特效

純靜態網頁。代碼與樣式分開。易於被搜索引擎收錄。
一、准備工作

進入到 /home/shiyanlou/ 目錄下，新建空白文檔：

命名為 Baymax.html （其它名字也可以，但後綴名必須是 .html）：

使用 gedit 打開，准備編輯代碼：

二、編寫 HTML

填寫以下代碼：
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Baymax</title></head>
<body>

<div id="baymax">


<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>


<div id="torso">
<div id="heart"></div>
</div>


<div id="belly">
<div id="cover"></div>
</div>


<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>


<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>


<div id="left-leg"></div>


<div id="right-leg"></div>

</div>
</body>
<html>

三、添加 CSS 樣式

我們已經使用 HTML 定義好「大白」的各個元素，現在就需要利用到 CSS 來繪制它的樣式外表。
由於「大白」是白色的，為了更容易辨識，我們把背景設為深色。
然後首先是頭部：
body {
background: #595959;
}

#baymax{
/*設置為居中*/
margin: 0 auto;

/*高度*/
height: 600px;

/*隱藏溢出*/
overflow: hidden;
}

#head{
height: 64px;
width: 100px;

/*以百分比定義圓角的形狀*/
border-radius: 50%;

/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;

/*設置下邊框的樣式*/
border-bottom: 5px solid #e0e0e0;

/*屬性設置元素的堆疊順序；擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面*/
z-index: 100;

/*生成相對定位的元素*/
position: relative;
}
效果預覽：

趕緊再來添加眼睛和嘴吧！
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;

/*旋轉該元素*/
transform: rotate(8deg);
}

#eye2{
/*使其旋轉對稱*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}

#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}

閱讀全文

htmlcss效果

與htmlcss效果相關的閱讀推薦