我院新闻
使用HTML+CSS制作一个简单的网页
发布时间:2024-01-29

简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。

网页预览(网页中的图片与图标均来自阿里巴巴矢量图标库)



CSS代码
里面包含悬浮、画面自适应等效果

* {
  box-sizing: border-box;
}
body {
	padding: 5px;
    background: #4682B4; 
}
.header {
	padding: 10px;
    background: #87CEEB;
	overflow: auto; 
}
.header a {
	text-decoration: none; 
}
.biaoti1 {
	display: inline-block;    
}
.relation {
	display: inline-block;
	float: right;
	margin: 18px 200px 0 0;
}
.relation a{
	text-decoration: none;
	color: #FFFACD;
}
.relation a:hover {
	color: blue;
}
.biaoti1 h1 {
	padding: 0 20px 0 20px;
	margin: 8px 8px 0 30px;
    font-family: Serif;
    font-size: 5vw;
	color: #FFFACD;
    text-shadow: 4px 4px 8px #8B4513;
}
.biaoti1 p {
	padding: 0 20px 0 20px;
	margin: 8px 8px 0 50px;
    font-family: Arial;
    font-size: 2vw;
	color: #FFFACD;
    text-shadow: 4px 4px 8px #8B4513;    
}
.logo {
	display: inline-block;
	margin: 8px 0 0 100px;
	max-width: 11%;
	height: auto;
	border-radius: 25px;	
}
.topnav {
	text-align:center; 
	overflow: hidden;
    background-color: #AFEEEE;
}
.topnav li {
	display: inline;
}
.topnav a {
    display: inline;
    color: #F8F8FF;
    text-align: center;
    padding:16px;
	font-family: Arial;
    text-decoration: none;
}
.topnav a:hover {
	background-color: #FFFACD;
    color: black;
}
.active {
	background-color: #4CAF50;
}
.row:after {
	content: "";
    display: table;
    clear: both;
}
.menubtn {
	background-color: #00BFFF;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.menu {
	overflow: visible
    position: relative;
    display: inline-block;
}
.menu-content {
	display: none;
	position: absolute;
	background-color: #FFFAF0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	padding: 0;
	margin: 12px 0 0 0;
	min-width: 140px;
}
.menu-content li {display: block;}
.menu-content a {
  color: black;
  text-align:left;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.menu-content a:hover {background-color: #f1f1f1}
.menu:hover .menu-content {
  display: block;
  background-color: white;
}
.menu:hover .menubtn {
  background-color: #FFFACD;
  color: black;
}
.content {
	float: left;
    width: 20%;
    padding: 10px;
 	height: 500px;
    font-size: 17px;
    letter-spacing: 2px;
    text-indent: 30px;
    line-height: 1.5;                                      
    border-radius: 9px;
    overflow: auto;
    background-color: #ADD8E6;
}
.content-main {
	float: left;
    width: 60%;
    padding: 10px;
 	height: 500px;
    font-size: 17px;
    letter-spacing: 2px;
    text-indent: 30px;
    line-height: 1.5;
    border-radius: 9px;
    overflow: auto;
    background-color: #D4F2E7;
}
.content:hover {
	background-color: #FFFACD;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.content-main:hover {
	background-color: #FFFACD;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
@media screen and (max-width:1000px) {//画面自适应
  .row ,.leftcolumn ,.rightcolumn ,.row2 {
    width: 100%;  
  }
}
@media screen and (max-width:900px) {
  .topnav ,.menu ,.relation a ,.slidenav {
  	display:none;
  }
    .logo {
    margin:0;
    padding:0;
    }
    .biaoti1 h1 ,.biaoti1 p{     
    width: 30%;  
    height: 30%;
    margin:0;
	padding: 0;
  }
}
.biaoti2 {
	text-align: center;
    font-family: Arial;
    font-size: 40px;
    color: #FFFACD;
}
.leftcolumn {   
  float: left;
  width: 75%;
}
.card-hp {
	display: inline-block;	
}
.card-img {
	display: inline-block;
	float: right;
}
.rightcolumn {
	float: left;
	width: 25%;
	padding-left: 15px;
}
.card-img-right {
	text-align: center;
}
.card {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
	overflow: auto;
	border-radius: 5px;
}
.card:hover {
	background-color: rgba(173,216,230, 0.5);
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.row2 {
	background-color: #D4F2E7;
}
.row2:after {
	content: "";
	display: table;
	clear: both;
}
.chuanglian {
	margin: 5px;
	border: 1px solid #ccc;
	float: left;
	width: 200px;
	border-radius: 0 0 15px 15px;
}
.chuanglian img {
	width: 100%;
	height: auto;
}
.chuanglian:hover {
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3), 0 6px 20px 6px rgba(0, 0, 0, 0.19);
}
.text{
	padding: 10px;
	text-align: center;
	border-radius: 0 0 15px 15px;
	background-color: rgba(173,216,230, 0.5);
}
.text:hover {
	color: green;
}
.center {
	text-align: center;
	background-color: rgba(173,216,230, 0.5);
}
.pagination {
	display: inline-block;
	padding: 5px 0 0 0;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.footer {
	padding: 20px;
    text-align: left;
    background: #F0FFFF;
    margin-top: 20px;
    border-radius: 9px;
    font-size: 28px;
	color: 	#008080;
}
.f1 :hover {
	top:10px;
}
.banquan {
	padding: 7px;
    text-align: center;
    background: rgba(173,216,230, 0.5);
    margin-top: 20px;
    font-size: 15px;
}
.banquan a {
	text-decoration: none;
	color: 	#008080;
}
.tool {
	float: right;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-size: 20px;
}
.tool .tooltext {
	visibility: hidden;
    width: 120px;
    background-color: #F5F5DC;
    color: black;
    text-align: center;
    padding: 5px 0;
	border-radius: 25px;
	font-size: 10px;
    /* 定位工具提示 */
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 105%;
}
.tool:hover .tooltext {
  visibility: visible;
}
.slidenav {
	position: fixed;
	top: 200px;
	right: 0;
	width: 90px;
	height:300px;
	text-align:center;
	border-radius: 25px 0 0 25px;
	background-color: rgba(255,255,255, 0.3);
}
.slidenav a{
	text-decoration: none;
}
.slidenav a:hover {
	color: blue;
}

HTML代码

DOCTYPE html>
<html>
<head>
head>
<body>

<div class="header">
	<a href="#">
	<img class="logo" src="D:\image\logo.png" alt="LOGO">
	a>
	<div class="biaoti1">
		<h1>Fabricsh1><br />
		<p>Home Textilep>
	div>
	<div class="relation">
		<a href="#">
			<img src="D:\image\login.png" width="50" height="50">
			<div>log indiv>
		a>
		<a href="#">
			<img src="D:\image\signin.png" width="50" height="50">
			<div>sign indiv>
		a>
	div>
div>

<div class="topnav">
	<ul>
    	<li><a href="#">Homea>li>
    	<li><a href="#">Worka>li>
    	<li><a href="#">Newsa>li>
    	<li><a href="#">Linka>li>
        <li><a href="#">Linka>li>
		<div class="menu">
			<li><a class="menubtn" href="#">Menua>li>
			<ul class="menu-content">
    			<li><a href="#">1111a>li>
				<li><a href="#">2222a>li>
				<li><a href="#">3333a>li>
			ul>
		div>
	ul>
div>

<div class="row">
	<div class="content">
    	<h2>Producth2>
    	<p>Some text..p>
    div>
    <div class="content-main">
    	<h2>New Producth2>
    	<p>Some text..p>
    div>
    <div class="content">
    	<h2>Producth2>
    	<p>Some text..p>
    div>
div>

<div class="biaoti2">
	<h2>Categoryh2> 
div>
<div class="row2">
	
	<div class="leftcolumn">
    	<div class="card">
		<div class="card-hp">
      		<h2>high accuracyh2>
      		<h4>door curtain made of clothh4>
      		<h4>sheer curtainh4>		
			<p>Some introduction...p>
			<p>Some introduction...p>
		div>
			<div class="card-img">
				<img src="D:\image\1.png" alt="1" width="300" height="300">
			div>
    	div>
        <div class="card">
		<div class="card-hp">
      		<h2>pashmh2>
      		<h4>door curtain made of clothh4>
      		<h4>sheer curtainh4>
			<p>Some introduction...p>
			<p>Some introduction...p>
		div>
			<div class="card-img">
				<img src="D:\image\2.png" alt="2" width="300" height="300">
			div>
    	div>
    div>
	
    <div class="rightcolumn">
    	<div class="card">
      		<h2>123h2>
      		<p>Some text..p>
    	div>
    	<div class="card">
      		<h2>123h2>
			<div class="card-img-right">
				<img src="D:\image\3.png" alt="3" width="300" height="300">
			div>
    	div>
    	<div class="card">
      		<h2>123h2>
      		<p>Some text..p>
    	div>
  div>
div>

<div class="biaoti2">
	<h2>Pictureh2>
div>
<div class="row2">
<div class="chuanglian">
    <img src="D:\image\1.png" alt="1" >
	<div class="text">1号div>	
div>
<div class="chuanglian">
    <img src="D:\image\2.png" alt="2" >
	<div class="text">2号div>	
div>
<div class="chuanglian">
    <img src="D:\image\3.png" alt="3" >
	<div class="text">3号div>	
div>
div>

<div class="center">
	<div class="pagination">
		<a href="#">«a>
    	<a href="#" class="active">1a>
    	<a href="#">2a>
    	<a href="#">3a>
    	<a href="#">4a>
   		<a href="#">5a>
    	<a href="#">6a>
    	<a href="#">»a>
	div>
div>

<div class="footer">
	<div>
	    <h2>Footerh2>
	div>
    <div class="row">
    	<div class="tool">联系方式
        	<span class="tooltext">Tooltextspan>
        div>
    div>
div>

<div class="slidenav">
	<div class="slidecontact">
		<a href="#">
			<img src="D:\image\top.png" width="70" height="70">
			<div>topdiv>
		a>
	div>
	<div class="slidecontact">
		<a href="#">
			<img src="D:\image\shopping.png"width="70" height="70">
			<div>shoppingdiv>
		a>
	div>
	<div class="slidecontact">
		<a href="#">
			<img src="D:\image\relation.png"width="70" height="70">
			<div>relationdiv>
		a>
	div>
div>

<div class="banquan">
	<a href="#">banquana>
div>
body>
html>
[返回上级]