html+css实现最的下拉框下拉列表

武飞扬头像

秋弈不入爱河

2024-04-14 帮助2人

下拉栏简单案例，直接上效果

学新通

学新通

html源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="content">
<form class="form1w">
<select>
<option>部门链接</option>
<option>部门链接2</option>
<option>部门链接3</option>
<option>部门链接4</option>
</select>
</form>
<form class="form1w">
<select>
<option>请选择栏目</option>
<option>教学科学1</option>
<option>教学科学2</option>
</select>
</form>
</div>
</body>
</html>

学新通

css源码

* {
padding: 0;
margin: 0;
}
/*div*/
.content{
width: 100%;
height: 200px;
background: #225f88;
}
form select{
width: 162px; /*宽*/
height: 40px; /*高*/
background-color: #a3b5bb; /*元素背景颜色*/
border: 1px solid #f1e8e8; /*边框线*/
color: #ffffff; /*字体颜色*/
outline:none; /*去掉黑框*/
margin: 30px 10px 0 50px; /*外边距*/
font-size: 16px; /*字体大小*/
}
form option{
width: 160px;
height: 40px;
}

学新通

瑞思拜/

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgbecce

系列文章

同类精品