简单的网页设计

最新推荐文章于 2024-08-13 21:58:24 发布

2301_80623118

最新推荐文章于 2024-08-13 21:58:24 发布

阅读量210

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/2301_80623118/article/details/140584607

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成都文理学院主页面</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .header,.nav{
            float:left;
            
        }
    
        .header {
            background-color: #ffffff;
            color: #fff;
            padding: 10px 0;
            
        }
        .nav {
            background-color: #fff;
            padding: 10px 0;
            margin-top: 15px;
            
        }
        .nav a {
            color: #333;
            text-decoration: none;
            margin: 500px;
        }
        .nav a:hover {
            color: #f60;
        }
        .main {
            margin: 20px;
            padding: 20px;
            background-color: #fff;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: relative;
            bottom: 0;
            width: 100%;
        }
        .logo {
            width: 300px;
            height: auto;
        }
        .min-image {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="start"></div>
    <div class="header">
        <img src="https://www.cdcas.edu.cn/wp-content/uploads/sites/42/sites/42/2023/04/wx1-2a.png " alt="成都文理学院" class="logo">
    </div>
    <div class="nav">
        首页
        学院简介
        新闻动态
        院系设置
        招生就业
        联系我们
    </div>
    <div class="main">
        <img src="https://www.cdcas.edu.cn/wp-content/uploads/sites/42/sites/42/2024/06/20221010102749-1.jpg" alt="校园风光" class="min-image">
        <h2>学院简介</h2>
        <p>成都文理学院是一所全日制普通本科院校，位于四川省成都市，拥有丰富的教学资源和良好的学术氛围。</p >
        <h2>新闻动态</h2>
        <ul>
            <li>成都文理学院举办2024年春季运动会</li>
            <li>学院召开2024年教学工作研讨会</li>
            <li>我院学子在全省大学生比赛中荣获佳绩</li>
        </ul>
    </div>
    <div class="footer">
        <p>版权所有：成都文理学院</p >
        <p>地址:四川省成都市XX区XX路XX号 邮编:610000</p >
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color:#65aede;
        
        }
        .box{
            width: 600px;
            height: 600px;
            margin: auto;
            margin-top: 170px;
        }
        .top{
        width:600px ;
        height: 100px;
        
        }
        .middle{
            width: 400px;
            height: 400px;
            margin: auto;
        
        }
        .login{
         
          border:1px solid rgb(231,236,187);
          margin: auto;
          background-color:#ffffff;
          line-height: 4;
          text-align: center;
          border-radius: 10%;
          box-shadow:10px 10px 10px gray;
     }
        
        select,button,input{
            width: 250px; 
            height: 35px;
          background-color:#ffffff;
          border:1px solid rgb(194,225,215);
        border-radius:10%;
                     }
          button{
            background-color: #0256aa;
          }
        .top11{font-size: 15px;
                color: rgb(67, 130, 206);
              text-shadow:10px 10px 10px rgb(231,225,225);
              }
        .top22{font-size: 15px;
                color: rgb(0, 6, 12);
              text-shadow:10px 10px 10px rgb(231,225,225);
              margin: 30px;
            }
              

    </style>

</head>
<body>
    <div class="box">
        <table class="top">
            <tbody>
                <tr>
                    <td align="center" height="120">
						<img src="http://jwc.scnucas.com/images/index_new/d_login_banner.png">
					</td>
                </tr>
            </tbody>
        </table>
    <div class="middle">
        <div class="login">
            <span class="top11"> 账号登录</span>
            <span class="top22" > 扫码登录</span> 
            <form action="">
            <select name="用户" id="">
                    <option   placeholder="学生">学生</option>
                    <option >学生</option>
                    <option >教师辅助人员</option>
                    <option >管理人员</option>
                    <option >门户维护员</option>
            </select>
               <br>
             <input type="text" placeholder="请输入账号">
                <br>
            <input type="password" placeholder="请输入密码">
                <br>
            <button type="submit" >登录</button>
             
             </form>
        </div>
    </div>
         <table>
                <tr>
                    <td align="center" >
					<table  align="center"  width="100%">
						<tbody>
                            <tr>
								<td align="center" height="26px" valign="top">
									<a href="http://jwc.scnucas.com/_data/version.html" target="_blank" style="font-size:16px;color:red;">运行环境指南</a>
								</td>
							</tr>
							<tr>
								<td align="center" style="color:#ffffff;width:600px">
                                Copyright 2000-2024 By
                                    <a href="http://www.kingosoft.com" target="_blank" style="font-size:16px;color:#0256aa;">青果软件集团有限公司</a> 
                                 All Rights Reserved
								</td>
							</tr>
						</tbody>
                    </table>
					</td>
                </tr>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单网页布局</title>
    <style>
      body {
        margin:0;padding:0;
        font-family: Arial, sans-serif;
      }
 
      .header {
        background-color: #f57200; 
        color: #fff; 
        padding: 20px;
        text-align: center; 
      }
 
      .nav {
        background-color: #f7f9fa; 
        width: 20%; 
        float: left; 
        padding: 0px 10px; 
      }
 
      
      .main {
        width: 1050px; 
        padding-left: 20px; 
        float: left; 
      }
      .right {
        width: 150px; 
        background-color: #f7f9fa; 
        float: left; 
        padding: 50px; 
        font-size: 20px;
      }
      
      .footer {
        background-color: #f57200; 
        color: #fff; 
        text-align: center; 
        line-height: 50px; 
        clear: both; 
        font-size: 16px; 
      }
      .banner {
        width: 800px;
      }

    </style>
  </head>
  <body>
    <div class="header">
      <h1>淘宝的大标题</h1>
    </div>
 
    <div class="container clearfix">
      <div class="nav">
        <h2>分类</h2>
        <div>
          <p>女装/内衣/ 奢品</p >
          <p>女鞋/男鞋/ 箱包</p >
          <p>美妆/饰品/ 洗护</p >
          <p>女装/内衣/ 奢品</p >
          <p>女鞋/男鞋/ 箱包</p >
          <p>美妆/饰品/ 洗护</p >
          <p>女装/内衣/ 奢品</p >
          <p>女鞋/男鞋/ 箱包</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
          <p>美妆/饰品/ 洗护</p >
        </div>
      </div>
 
      <div class="main">
        <p>这是轮播海报区。</p >
        <img  class="banner"  src="C:\Users\m'r'c\Desktop\O1CN011uTdTf2Hr1xdTIdIW_!!0-item_pic.jpg_Q75.jpg_.avif" alt="">
      </div>
      <div class="right">
        <p>这是右侧登录区</p >
        <p>这是右侧登录区</p >
        <p>这是右侧登录区</p >
        <p>这是右侧登录区</p >
        <p>这是右侧登录区</p >
      </div>
    </div>
 
    <div class="footer">&copy; 2024 简单网页布局</div>
  </body>
</html>