一个chrome设置的cssdemo

最新推荐文章于 2022-05-30 14:27:10 发布

cdy1171077218

最新推荐文章于 2022-05-30 14:27:10 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/cdy1171077218/article/details/102701757

版权

效果图
css效果图
只是一个单纯的css样式无任何js效果

代码如下
html

<meta charset="UTF-8">
<link rel="stylesheet" href="chromedemo.css">
<title>Chrome</title>
<body>
<div class="top">
<div class="shouye"><i>设置</i></div>
<div class="center">
	<a href="#"></a>
	<input type="text" name="" placeholder="在设置中搜索">
</div>
</div>
<div class="left">
	<ul><li><a href="#">用户</a></li>
	
	<li><a href="#">自动填充</a></li>
	
	<li><a href="#">外观</a></li>
	
	<li><a href="#">搜索引擎</a></li>
	
	<li><a href="#">默认浏览器</a></li>
	
	<li><a href="#">启动时</a></li>

    </ul>
</div>
<div class="right">
	<p class="rightp">用户</p>
	<div class="rul"><ul>
		<li><div class="rfist"><p>cdy</p><p>同步到 1171077218qq@gmail.com</p></div>
		<div class="ra"><a href="#" >关闭</a></div>
		</li>
		<li><a href="#" >同步功能和 Google 服务</a></li>
		<li><a href="#" >管理您的 Google 帐号</a></li>
		<li><a href="#" >Chrome 名称和图片</a></li>
		<li><a href="#" >导入书签和设置</a></li>
	</ul></div>
</div>
</body>
</html>

css

@charset "UTF-8";
*{
	padding:0;
	margin:0;
}
iniput{
	border:0 none;
	outline:0 none;
	
}
i{
	font-style: normal;
}
a{
	text-decoration:none;
	color:#000;
}
li{
	list-style: none;
}
.clearfix{
	content:'';
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.top{
	padding:0;
	height:56px;
	background-color: #3367D6;
}
.shouye{
	float:left;
	margin-left:24px;
	line-height:56px;
}
.shouye i{
	color:#ffff;
}
.center{
	float:left;
	margin-left: 285px;
	margin-top:8px;
	
	width:680px;
	height:40px;
	background-color: rgba(0,0,0,.20);
	border-radius: 5px ;
}

.center  a{
	display:block;
	float: left;
	height:40px;
	width: 44px;
	border-radius: 5px;
	background:url("./1.jpg") no-repeat center center;	
}
.center input{
	float:left;
	height:40px;
	width: 636px;
	border-radius: 5px ;
	color: #BBC7E3;
	background-color: rgba(0,0,0,.0);
	border: 0 none;
}

/* WebKit browsers */
.center input::-webkit-input-placeholder {
    color: #BBC7E3;
 
}
/* Mozilla Firefox 4 to 18 */
.center input:-moz-placeholder {
    color: #BBC7E3;
    opacity: 1;
    
}
/* Mozilla Firefox 19+ */
.center input::-moz-placeholder {
    color: #BBC7E3;
    opacity: 1;
    
}
/* Internet Explorer 10+ */
.center input:-ms-input-placeholder {
	color: #BBC7E3;
	opacity: 1;
}
.left{
	float: left;
	width:250px;
}
.left ul{
	margin-top:  24px; 
	margin-left: 64px;
}
.left li{
	font-size: 14px;
	line-height: 40px;
}
.left li a{
	
	display:block;
	color:#686C71;
}
.right{
	float:left;
	margin-left: 95px;
	
	width:680px;
}
.right .rightp{
	margin-top: 14px;
	font-size: 14px;
	line-height: 50px;
}

.right .rul li{
	height:48px;
	line-height: 48px;
	border: 0.5px solid #C1C3C4;
	border-top:none;
}
.right .rul li a{
	display: block;
	height:48px;
	width:660px;
	padding-left: 20px;
	color:#202124;
	font-size: 14px;
}
.right .rul li:first-child{
	height:64px;
	border: 0.5px solid #C1C3C4;
    border-radius:5px 5px 0 0;
}
.right .rul li:last-child{
	border-radius: 0 0 5px 5px;
}
.right .rul .rfist{
	float:left;
	margin-top:14px;
	margin-left:20px;
}
.right .rul p{
	line-height: 22px;
	font-size: 14px;
	
}
 .right .rul p:nth-child(2){

	color:#686C71;
} 
.right .rul .ra{
	float:right;
	margin-top: 18px;
	margin-right: 22px;
	width:61px;
	height: 28px;
	border: 1px solid #C1C3C4;
	border-radius: 5px ;
}
.right .rul .ra a{
	display:block;
	padding-left: 0;
	text-align: center;
	color:#3583EB;
	height: 28px;
	width:61px;
	line-height:28px ;
	
}