07 css case (school official website homepage, questionnaire)

Assignment one:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img {
				width: 950px;
			}
			
			.img {
				height: 276px;
				width: 455px;
				float: left;
				border: solid 1px #D5D5D5;
				padding-top: 2px;
				padding-bottom: 2px;
				padding-left: 2px;
				padding-right: 2px;
			}
			
			.xwdt-news {
				margin-left: 8px;
				float: right;
				height: 280px;
				width: 481px;
			}
			
			.xwdt-tit {
				width: 100%;
				height: 24px;
				background: url(https://www.sdutcm.edu.cn/dfiles/14601/images/news-bac.jpg) no-repeat;
			}
			
			.xwdt-list {
				border: 1px solid #CDEBF5;
				border-top: 0;
				width: 459px;
				height: 247px;
				padding: 5px 10px;
				
			}
			
			.infolist {
				width: 459px;
				height: 230px;
				margin-left: -40px;
			}
			
			.infolist li {
				width: auto;
				height: 25px;
				border-bottom: 1px dotted #8c8c8c;
				background: url(https://www.sdutcm.edu.cn/dfiles/14601/images/new_ico.jpg) no-repeat 0px 6px;
				line-height: 25px;
			}
		
			
			.infolist span {
				
				float: right;
			}
			
			.infolist a {
				font-size: 12px;
				color: #000;
				float: left;
				padding-left: 15px;
			}
			
			span {
				font-size: 10px;
			}
			
			.pClear {
				clear: both;
			}
			
			#line3 {
				width: 950px;
				margin: 0 auto;
				height: 41px;
				border-top: 2px solid #A4C3DF;
				border-bottom: 1px solid #A4C3DF;
				margin-top: 10px;
				vertical-align: middle;
				background: #EEF8FF;
			}
			
			#line3 .title {
				font-size: 15px;
				font-weight: bold;
				margin-left: 15px;
				line-height: 41px;
				vertical-align: middle;
			}
			#entr a {
			    float: right;
			    margin-right: 15px;
			    line-height: 41px;
			    vertical-align: middle;
			    font: ;
			    font-size: 12px;
			    font-weight: bold;
			    color: #1D527C;
			    text-decoration: none;
			    letter-spacing: 0em;
			}
			#foot {
				width: 950px;
				margin: 0 auto;
				font-size: 12px;
				text-align: center;
				margin-top: 15px;
				color: #666;
			}
			.daohang{
				
				list-style-type: none;
				
			}
			.daohang .daohang1{
				float: left;
				margin-right: 40px;
				
			}
			ul li{
				list-style-type: none;
			}
		</style>
	</head>

	<body>
		<div style="margin: 0px auto; width: 950px;">
			<div class="logo"><img src="https://www.sdutcm.edu.cn/dfiles/14601/images/sdzyy-logo.jpg"></div>
			<div style="height: 40px;background-color: purple;line-height: 40px;color: white;margin-top: -15px;">
				 <ul class="daohang">
				 	<li class="daohang1">首页</li>
				 	<li class="daohang1">学校概况</li>
				 	
				 	<li class="daohang1">管理机构</li>
				 	
				 	<li class="daohang1">院系设置</li>
				 	
				 	<li class="daohang1">师资队伍</li>
				 	
				 	<li class="daohang1" >科学研究</li>
				 	
				 	
				 	<li class="daohang1">人才培养</li>
				 	
				 	<li class="daohang1">附属医院</li>
				 	
				 	<li class="daohang1">信息公开</li>
				 	
				 </ul>
			</div>
			<div>
				<div class="banner">
					<div class="banner_bloc"><img class="img" src="https://www.sdutcm.edu.cn/__local/6/ED/4F/6B8A62E14704B91109179BC414D_9A2A1945_81B2.jpg" alt=""></div>
					<div class="xwdt-news">
						<div class="xwdt-tit">
							<a href="xxxw.jsp?urltype=tree.TreeTempUrl&amp;wbtreeid=1002" target=""></a>
						</div>
						<div class="xwdt-list">
							<ul class="infolist">

								<li>
									<span>2023-10-18</span>
									<a title="学校参加黄河流域大学联盟第二届联盟理事大会">
										学校参加黄河流域大学联盟第二届联盟理事大会</a>
								</li>
								<li>
									<span>2023-10-18</span>
									<a title="我校两名教师荣获全国高等中医药院校思想政治 理论课建设经验交流暨第九届教学协作会大奖">
										我校两名教师荣获全国高等中医药院校思想政治 理论课建…</a>
								</li>
								<li>
									<span>2023-10-18</span>
									<a title="学校召开博士生导师座谈会">
										学校召开博士生导师座谈会</a>
								</li>
								<li>
									<span>2023-10-18</span>
									<a title="巴西中医学院客人来访">
										巴西中医学院客人来访</a>
								</li>
								<li>
									<span>2023-10-18</span>
									<a title="学校召开山东省第一届中小学体育教师基本功比赛筹备会">
										学校召开山东省第一届中小学体育教师基本功比赛筹备会</a>
								</li>
								<li>
									<span>2023-10-17</span>
									<a title="学校组织参加第60届中国高等教育博览会">
										学校组织参加第60届中国高等教育博览会</a>
								</li>
								<li>
									<span>2023-10-17</span>
									<a title="学校部署2023年高等教育事业统计工作">
										学校部署2023年高等教育事业统计工作</a>
								</li>
								<li>
									<span>2023-10-16</span>
									<a title="校领导到国际医学中心校区调研学生教育管理安全工作">
										校领导到国际医学中心校区调研学生教育管理安全工作</a>
								</li>
								<li>
									<span>2023-10-16</span>
									<a title="我校在2023’华佗杯全国高等院校针灸推拿临床技能大赛中获佳绩">
										我校在2023’华佗杯全国高等院校针灸推拿临床技能大赛中…</a>
								</li>

							</ul>

						</div>
					</div>
				</div>
			</div>
			<div class="pClear"></div>
			<div id="line3">
				<div style="float: left;"><span class="title">Internet服务</span> <span class="“abs”">|</span>
					<span id="site"><a>教育部</a></span>
					<span id="site"><a>省教育厅</a></span>
					<span id="site"><a>国家卫健委</a></span>
					<span id="site"><a>国家中医药管理局</a></span>
					<span id="site"><a>省卫健委</a></span>
					<span id="site"><a>新华网</a></span>
					<span id="site"><a>人民网</a></span>
					<span id="site"><a>中国新闻网</a></span>
					<span id="site"><a>中央电视台</a></span>
					<span id="site"><a>省中药协会</a></span>

				</div>
				<div id="entr">
					<a href="">vpn登录</a>
					<a href="">校园网登录</a>
				</div>
			</div>
			<div id="foot">
				<p>版权所有 山东中医药大学| 地址:山东省济南市长清区大学科技园大学路4655号 | 邮编:250355|
					<a style="color:#666666">鲁ICP备05002379号-1</a>|
					<a style="display:inline-block;text-decoration:none;height:20px;line-height:20px;color: blue;">鲁公网安备 37010202001879号</a>
				</p>
				
				<a>
				</a>
			</div>
		</div>

	</body>

</html>

Homework 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		div{
			width: 50%;
			border:5px pink solid;
			padding:5px;
			margin: auto;
			
		}
		</style>
	</head>
	<body>
		<div>
		<h3 align="center">图书馆读者调查问卷</h3>
		<hr color="pink" size="2">
		<p>为了能够及时了解您对图书馆的需求,提升我校图书馆文献资源建设的质量和水平,更好的为我校教学科研
		服务,我馆特设计了问卷调查题目如下,请协助填写,谢谢您的合作!</p >
		<hr color="pink" size="2">
		<p>1、您的年级</p >
		<p>请你选择:
		<select>
					<option value="a" selected>请你选择</option>
					<option value="b">大一</option>
					<option value="c">大二</option>
					<option value="d">大三</option>
					<option value="e">大四</option>
				</select>
		</p >
		<hr color="pink" size="2">
		<p>2、您的专业</p >
		<input type="text" size="100">
		<hr color="pink" size="2">
		<p>3、对于图书馆的阅览环境</p >
		<input type="radio">满意<br>
		<input type="radio">基本满意<br>
		<input type="radio">不满意&nbsp;
		您的建议:<input type="text" size="50">
		<hr color="pink" size="2">
		<p>4、您到图书馆的原因是(可多选):</p >
		<input type="checkbox">借阅专业图书<br>
		<input type="checkbox">随便坐坐,翻翻书刊<br>
		<input type="checkbox">借阅光盘<br>
		<input type="checkbox">参加图书馆组织的活动<br>
		<input type="checkbox">自习,复习功课<br>
		<input type="checkbox">上网<br>
		<input type="checkbox">检索电子文献
		<hr color="pink" size="2">
		<p>5、您到图书馆的频率</p >
		<input type="radio">几乎每天<br>
	    <input type="radio">每周1-2次<br>
		<input type="radio">每月1-2次<br>
		<input type="radio">几乎不去
		<hr color="pink" size="2">
		<p>6、您对学校的建议</p >
		<textarea cols="100" rows="5"></textarea>
		<hr color="pink" size="2">
		<p align="center">
		<button>提交</button>
		<button>重置</button>
		
		
		</div>
	</body>
</html>

Guess you like

Origin blog.csdn.net/snowy_and_sunny/article/details/134100383