CSS学校服务平台仿制

最新推荐文章于 2024-09-25 10:17:48 发布
最新推荐文章于 2024-09-25 10:17:48 发布
阅读量181 收藏
点赞数 4
文章标签： css 前端 大作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81629118/article/details/140615582
版权

一、登录页面

<!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>
		div{
			border: 1px solid rgba(255, 0, 0, 0);
			
		}
		.img1{
			margin-left: 85px;
			margin-top: 80px;
		}
		.img{
			margin-top: 1px;
			margin-left: 180px;
		}
		.top{
			width: 955px;
			height: 150px;
			margin: auto;
		}
		.box{
			height: 296px;
			background-color: rgba(224, 226, 228, 0.842);
		}
		.box1{
			width: 955px;
			height: 296px;
			margin: auto;
			background-image: url(./登录背景.gif);
			
		}
		.box2{
			width: 311.99px;
			height: 229.99px;
			margin-left: 600px;
			margin-top: 50px;
		}
		.button{
			margin-left: 56%;
		}
		.bottom{
			width: 808.99px;
			height: 19.26px;
			margin: auto;
		}
		.span{
			font-size:26px;
		}
		.span1{
			font-size: 14px;
			color:#999
		}
		.span2{
			color: blue;
			text-decoration:underline;
		}
	</style>
</head>
<body>
	<div class="top"><img class="img1" src="./成都文理log.png" alt="" width="474px" height="61px"></div>
	<div class="box">
		<div class="box1">
			<div class="box2">
				<span class="span">用户登录</span>
				<form action="./2学校官网内容一.html">
					<p>用户名：<input type="text" name="username"></p>
					<p>密码：&nbsp&nbsp <input type="password" name="password"></p>
					<p><input class="img" type="image" src="./箭头.gif" name="img" id="">
					<img src="./问号.gif" alt="">
					</p>
				</form>
			</div>
	</div>
	</div>
	<div class="bottom">
		<span class="span1">家里蹲学院有限公司 小六花版权所有</span>
		<span class="span2">找回密码</span>
	</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>
        div{
            /* border: 1px solid red; */
            margin-top: 5px;
            margin-left: 5px;
        }
        .box span{
            color: aliceblue;
            font-size: 13px;
        }
        .top{
            width: 950px;
            height: 75px;
            position: relative;
            margin: auto;
            
        }

        .max_menu{
            background-color:  rgb(52, 112, 190);
        }
        .min_menu1{
            width: 930px;
            height: 51px;
            position: relative;
            margin: auto;
        }
        .min_menu2{
            margin-top: -60px;
            margin-left: 80px;
        }
        .min_menu2 span{
            font-size: 20px;
            color: aliceblue;
            font-weight: 600;
            margin-left: 40px;
        }
        .box{
            position: relative;
            width: 910px;
            height: 450px;
            margin: 0 auto;
            margin-top: 20px;

            display: grid;
            grid-template-columns: repeat(6,1fr);
            grid-template-rows: repeat(3,1fr);

        }
        .box1{
            grid-column: 1/3;
            grid-row: 1/3;
            background-color: rgb(54, 105, 172);
        }
        .box2{
            grid-row: 1/3;
            background-color: rgb(46, 203, 228);
        }
        .box3{
            background-color: rgb(12, 159, 239);
        }
        .box4{
            grid-column: 5/7;
            background-color: rgb(244, 157, 171);
        }
        .box5{
            background-color: rgb(166, 192, 221);
        }
        .box6{
            grid-column: 5/7;
            background-color: rgb(172, 127, 213);
        }
        .box7{
            background-color: rgb(53, 127, 117);
        }
        .box8{
            background-color: rgb(140, 213, 29);
        }
        .box9{
            background-color: rgb(230, 171, 94);
        }
        .box10{
            background-color: rgb(157, 239, 239);
        }
        .box11{
            background-color: rgb(208, 178, 236);
        }
        .box12{
            background-color: rgb(65, 92, 150);
        }
        .img_box{
            position: relative;
            display:block;
            width: 100px;
        }
        .img0{
            margin-top: 20px;
        }
        .img1{
            margin-top: 100px;
            margin-left: 30px;
        }
        .box1_1{
            margin-left: 32px;
        }
        .box1_2{
            position: absolute;
            top: 121px;  
            left: 168px; 
            /* display:block; */
            line-height: 0.4;
        }

        .img2{
            margin-left: 39px;
            margin-top:100px ;
        }
        .span2{
            margin-left: 40px;
        }
        .img3{
            margin-left: 26px;
            margin-top:40px ;
        }
        .span3{
            margin-left: 40px;
        }
        .img4{
            margin-left: 26px;
            margin-top:40px ;
        }
        .span4{
            margin-left: 40px;
        }
        .img5{
            margin-left: 30px;
            margin-top:40px ;
        }
        .span5{
            margin-left: 30px;
        }
        .img6{
            margin-left: 26px;
            margin-top:23px ;
        }
        .span6{
            margin-left: 40px;
        }
        .img7{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span7{
            margin-left: 29px;
        }
        .img8{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span8{
            margin-left: 38px;
        }
        .img9{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span9{
            margin-left: 29px;
        }
        .img10{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span10{
            margin-left: 17px;
        }
        .img11{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span11{
            margin-left: 38px;
        }
        .img12{
            margin-left: 37px;
            margin-top:23px ;
        }
        .span12{
            margin-left: 29px;
        }
        .bottom{
            margin: auto;
            margin-top: 20px;
            width: 950px;
            border: 1px solid rgba(36, 161, 229, 0.218);
        }
        .bottomid{
            margin: auto;
            width: 650px;
            color: rgb(106, 108, 108);
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="./成都文理log.png" alt="" >
    </div>
    <div class="max_menu">
        <div class="min_menu1">
            <img class="img0" src="./menu.gif" alt="" width="31px" height="50px">
            <div class="min_menu2">
                <span>我的桌面</span>
                <span>学籍成绩</span>
                <span>培养管理</span>
                <span>考试报名</span>
                <span>教学评价</span>
                <span>交流申请</span>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box1">
            <div class="img_box">
                <img class="img1" src="./个人信息.png" alt="" width="72px" height="64px">
                <div class="box1_1"><span>个人信息</span></div>
            </div>
            <div class="box1_2">
                <p><span class="span1_1">姓名：小六花</span></p>
                <p><span class="span1_2">学号：20241001111</span></p>
            </div>
        </div>

        <div class="box2">
            <a href="./3学校官网内容二.html">
            <img class="img2" src="./选课中心.png" alt="" width="65px" height="65px">
            <div class="span2"><span>选课中心</span></div>
            </a>
        </div>

        <div class="box3">
            <img class="img3" src="./学生教评.png" alt="" width="92px" height="55px">
            <div class="span3"><span>学生教评</span></div>
        </div>

        <div class="box4">
            <img class="img4" src="./留言.png" alt="" width="80px" height="57px">
            <div class="span4"><span>已收留言</span></div>
        </div>

        <div class="box5">
            <img class="img5" src="./培养方案.png" alt="" width="71px" height="62px">
            <div class="span5"><span>培养方案</span></div>
        </div>

        <div class="box6">
            <img class="img6" src="./公告.png" alt="" width="67px" height="79px">
            <div class="span6"><span>已收公告</span></div>
        </div>

        <div class="box7">
            <img class="img7" src="./成绩查询.png" alt="" width="66px" height="59px">
            <div class="span7"><span>课程成绩查询</span></div>
        </div>

        <div class="box8">
            <img class="img8" src="./周历.png" alt="" width="64px" height="60px">
            <div class="span8"><span>教学周历</span></div>
        </div>

        <div class="box9">
            <img class="img9" src="./授课计划查询.png" alt="" width="66px" height="66px">
            <div class="span9"><span>授课计划查询</span></div>
        </div>

        <div class="box10">
            <img class="img10" src="./未获得学分.png" alt="" width="71px" height="69px">
            <div class="span10"><span>未获得学分成绩查询</span></div>
        </div>

        <div class="box11">
            <img class="img11" src="./学籍卡片.png" alt="" width="62px" height="73px">
            <div class="span11"><span>学籍卡片</span></div>
        </div>

        <div class="box12">
            <img class="img12" src="./考试报名.png" alt="" width="55px" height="67px">
            <div class="span12"><span>社会考试报名</span></div>
        </div>

    </div>
    <div class="bottom"></div>
    <div class="bottomid"><span>Copyright (C)家里蹲大学发展有限公司 Al Rights hahahahah 川ICP 备12345678910号</span></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>
        div{
            /* border: 1px solid red; */
            margin-top: 5px;

        }
         .top{
            width: 950px;
            height: 75px;
            position: relative;
            margin: auto;
            
        }

        .max_menu{
            background-color:  rgb(52, 112, 190);
        }
        .min_menu1{
            width: 930px;
            height: 51px;
            position: relative;
            margin: auto;
        }
        .img0{
            margin-top: 20px;
        }
        .min_menu2{
            margin-top: -60px;
            margin-left: 80px;
        }
        .min_menu2 span{
            font-size: 20px;
            color: aliceblue;
            font-weight: 600;
            margin-left: 40px;
        }

        .box{
            width: 964px;
            height: 820px;
            position: relative;
            margin: auto;
            border-bottom: 1px solid rgb(78, 170, 220) ;
        }
        .box1{
            width: 770px;
            height: 130px;
            position: absolute;
            left: 186px;
        }
        .box2{
            width: 180px;
            height: 820px;
            border-right: 1px solid rgb(78, 170, 220);
            border-bottom: 1px solid rgb(78, 170, 220);
        }
        li{
            list-style:none;
            list-style-position:outside;
            margin-top: 10px;
        }
        ol{
            padding-bottom: 20px;
            border-bottom: 1px solid rgb(78, 170, 220);
        }
        .img111,.img222{
            position: relative;
            top: 10px;
        }
        .box1 *{
            margin:0;
        }
        .menu1{
            height: 40px;
            padding-top: 20px;
        }
        .menu2{
            background-color: rgba(169, 216, 242, 0.239);
        }
        .bottomid{
            margin: auto;
            width: 650px;
            color: rgb(106, 108, 108);
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="./成都文理log.png" alt="" >
    </div>
    <div class="max_menu">
        <div class="min_menu1">
            <img class="img0" src="./menu.gif" alt="" width="31px" height="50px">
            <div class="min_menu2">
                <span>我的桌面</span>
                <span>学籍成绩</span>
                <span>培养管理</span>
                <span>考试报名</span>
                <span>教学评价</span>
                <span>交流申请</span>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="box1">
            <div class="menu1">
                <span class="span1" style="color: blue;font-size: 14px;font-weight: 700;">首页</span>
                <span class="span2" style="font-size:10px;font-weight:900;">>></span>
                <span class="span3" style="font-weight:900;">选课管理</span>
                <span class="span4" style="font-size:10px;font-weight:900;">>></span>
                <span class="span5" style="font-weight:900;">学生选课中心</span>
            </div>
            <div class="menu2">
               <table
                border="1px"
                width="770px"
                cellspacing=0>
                <tr>
                    <th scope="col" align="center">学年学期</th>
                    <th scope="col" align="center">选课名称</th>
                    <th scope="col" align="center">选课时间</th>
                    <th scope="col" align="center">操作</th>
                </tr>
                <tr>
                    <td colspan="4" align="center" style="font-size: 12px;">未查询到数据</td>
                </tr>
               </table>
            </div>
        </div>
        <div class="box2">
            <h4><img class="img111" src="./img222.png" alt="">我的课表</h4>
            <ol>
            <li>学期理论课表</li>
            <li>实验课表查询</li>
            <li>班级课表查询</li>
            <li>教室课表查询</li>
            <li>课程课表查询</li>
            </ol>

            <h4><img class="img222" src="./img222.png" alt="">选课管理</h4>
            <ol>
            <li>学生选课中心</li>
            <li>学生预选管理</li>
            <li>学生预选查询</li>
            </ol>
        </div>
    </div>
    <div class="bottomid"><span>Copyright (C)家里蹲大学发展有限公司 Al Rights hahahahah 川ICP 备12345678910号</span></div>
</body>
</html>

结果

小六花s
关注
教你用html和css仿制小米官网页面
SunAndYou
12-13 9481
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
我的大学期末网页作业 仿学校网站制作实现 HTML+CSS西北大学新闻网带psd带js
STU网页设计
09-30 135
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
教你用html和css仿制小米官网页面！
爬遍所有网站
12-15 2798
一、使用的工具？ 博主使用的是Visual Studio Code。这个是真的方便啊，体型小不说，好用的插件还不少！赞一个。不过为了之后的后端学习，我开始慢慢转向用IDEA 了，这个软件使用起来也是真的不赖啊（想要的小伙伴可以评论区找我哦，我会经常看你们的评论的） 原文地址：教你用html和css仿制小米官网页面_是小瓶子呀的博客-CSDN博客 PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资料以及群交流解答点击即可加入 二、结果展示 .
css之盒子模型
qq_52109865的博客
02-08 410
基础部分 首先什么是盒子模型？ 以edge浏览器为例，点击f12，进入已计算那一栏，然后找到这么个玩意 分别为，padding>>>内边距 border>>边框 margin>>外边距 实例 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页实例</title> <style type="t
教你做一张好看又简单的纯CSS+HTML动漫网页
2303_78612872的博客
06-26 1007
教你做适合初学者的好看又简单的纯CSS+HTML动漫网页设计
HTML静态网页设计作业、仿写大学官网 （力争使用最少的Html 、CSS代码实现）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
01-03 690
HTML静态网页设计作业、仿写大学官网 （力争使用最少的Html 、CSS代码实现）
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站 (2)
HTML网页设计
06-20 384
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
华为云官网ClassRoom.html 网页 html，css代码实现
小米吃辣椒的博客
08-24 5354
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Co...
HBuilder-简易仿制网页
nikezhenhaokan的博客
03-14 1175
【代码】HBuilder-简易仿制网页。
SW6.8精美仿制动易学校SF模板
08-23
【SW6.8精美仿制动易学校SF模板】是一款基于Siteweaver平台设计的专业网站模板，主要用于教育机构或学校的官方网站建设。此模板以其独特的设计风格和功能特性，为用户提供了一个高效且美观的网页布局，旨在提升用户...
学校实训毕业商用项目-CMS仿模板无忧源码下载站模板.zip
09-03
在仿制模板无忧源码下载站的过程中，CSS将用于定制颜色、字体、布局等元素，使网站看起来专业且吸引人。而JavaScript则负责添加交互性，例如响应式导航、滚动效果、表单验证等功能，提高用户体验。 CMS（内容管理...
学校实训毕业商用项目-HTML5自适应仿WP大学织梦整站源码.zip
09-04
3. **WordPress仿制**：WordPress是全球最受欢迎的内容管理系统（CMS），以其易用性和强大的插件、主题系统闻名。此项目模仿了WordPress的设计风格，可能包括类似的导航菜单、文章布局和小工具区域，为用户提供熟悉...
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
m0_67403272的博客
07-31 2820
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改，按照自己的审美喜好来哈！以上就是全部代码啦！直接复制代码然后替换一下图片就好啦！css样式和form共用的。...
CSS学习 - 常用属性
最新发布
Aaron121314的博客
09-25 425
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
【CSS】鼠标 、轮廓线 、 滤镜 、 堆叠层级
千里之行，始于足下
09-23 523
鼠标，轮廓线，滤镜，堆叠层级
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1136
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
【CSS】定位
千里之行，始于足下
09-23 965
定位：默认定位，相对定位，绝对定位，固定定位，粘性定位
CSS中的字体样式、文本样式、列表样式以及背景和渐变
qq_63946637的博客
09-23 910
本文旨在帮助大家学习CSS中的字体样式、文本样式、列表样式以及背景和渐变
基于div➕css社区服务平台的设计
06-10
基于div+css社区服务平台的设计，可以分为以下几个部分： 1. 顶部导航栏 顶部导航栏通常包含网站的logo、搜索框、导航链接和用户登录/注册按钮等元素。可以使用div和css实现导航栏的布局和样式，使用JavaScript实现交互效果。 2. 主体内容区 主体内容区通常包含各种社区服务的内容，例如帖子列表、用户信息、社区活动等。可以使用div和css实现内容区的布局和样式，使用JavaScript实现交互效果和动态加载数据。 3. 侧边栏 侧边栏通常包含社区服务平台的一些重要功能，例如热门帖子、最新活动、推荐用户等。可以使用div和css实现侧边栏的布局和样式，使用JavaScript实现交互效果和动态加载数据。 4. 底部信息栏 底部信息栏通常包含网站的版权信息、联系方式、友情链接等。可以使用div和css实现底部信息栏的布局和样式。 5. 响应式设计 为了适应不同的设备屏幕尺寸，社区服务平台需要进行响应式设计。可以使用CSS媒体查询和flexbox等技术实现不同屏幕尺寸下的布局和样式。 综上所述，基于div+css社区服务平台的设计需要考虑导航栏、主体内容区、侧边栏、底部信息栏和响应式设计等方面的内容。通过合理的布局和样式设计，以及JavaScript交互效果的实现，可以提高社区服务平台的用户体验和使用效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值