当前位置：首页 » 编程语言 » 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效果相关的阅读推荐