首页 > 其他分享 >475. 简单的学校网页 大学生期末大作业 Web前端网页制作 html+css

475. 简单的学校网页 大学生期末大作业 Web前端网页制作 html+css

时间:2024-09-06 21:51:26浏览次数:11  
标签:Web 网页 li padding width 475 20px margin

目录

一、网页概述

二、网页文件

 三、网页效果

四、代码展示

1.html

2.CSS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐


欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!

说起Web前端,大学开启这扇技术之门以来,一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来,才真正开启了这段奇妙的旅行!在一次次需求分析、成品交付和客户服务的过程中,进行了一次又一次的知识应用的实践和验证。学以致用,实践出真知!从最初的Web前端的迷途小书童到如今的技术专家,多年的服务客户和服务大学生的实践经验,早就驾轻就熟!

 奇妙之处在于:当你得到客户的认可、公司的赞赏和同事的敬仰,尤其是业余时间为广大的大学生提供各种各样的帮助和指引,学弟学妹们一致好评,认为学姐是他们的榜样的时候,你会发现,知识的应用除了体现自身价值,还能实现自我满足!这种感觉是相当奇妙的!

我在CSDN的奇妙旅行,除了学习其他知识和持续发布优质的网页实例之外,后续时间允许的情况下,我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括:Web前端网页制作的专题研究辅导网页定制大学生课程作业辅导、毕设辅导、网页模板源码教程资料技术咨询,以及其他有偿或无偿的服务。如有需要,欢迎随时咨询!能满足你们所需,是我的荣幸!

非常感谢大家的关注和点赞,你们的关注和点赞是我持续创作的动力,谢谢!


一、网页概述

本实例应用html+css,div+css布局,代码简单,适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。


二、网页文件

本网页实例共包含9个页面:


 三、网页效果

以下是本篇文章正文内容,下面案例仅供参考(节选示例):


四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/all.css" rel="stylesheet"  media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学校</title>
</head>
<body>
<div class="head">
    <div class="ma">
  <div class="logo"> <img src="images/logo.png" width="250" /></div>
  <div class="menu">
    <ul class="center">
      <li><a href="index.html">首页</a></li>
      <li><a href="worklist.html">作品列表</a></li>
      <li><a href="schoollist.html">学校列表</a></li>
      <li><a href="show.html">学校展馆</a></li>
      <li><a href="reg.html">会员注册</a></li>
    </ul>
  </div>
  <div class="clear"></div></div>
</div>
<div class="banner"><img src="images/timg.jpg" width="100%" /></div>
<div class="content">
  <div class="pad" style="border-bottom:#ccc solid 1px;"><marquee><strong>公告:</strong>我校软件工程学院16级部分学生在陶玉婷老师的带领下,参加了此次峰会。今年峰会的主题是“智能+,拥抱未来”。上午9点整,大会正式开幕</marquee></div>
  <div class="left">
    <div class="bar">
      <h3>热门院校</h3>
    </div>
    <div class="tub" style="margin: 0">
   <ul>
    <li><a href="zinfo.html">土木工程系</a></li>
    <li><a href="zinfo.html">工程管理系</a></li>
    <li><a href="zinfo.html">经济管理系</a></li>
    <li><a href="zinfo.html">机电与信息工程系</a></li>
    <li><a href="zinfo.html">交通与市政工程系</a></li>
    <li><a href="zinfo.html">马克思主义学院</a></li>

   </ul>
   <div class="clear"></div>
  </div>
    
  </div>

  <div class="right">
    <div class="bar">
      <h3>优选作品</h3>
    </div>
    <div class="pics scrollleft" style="clear:both">
      <ul>
        <li> <a href="info.html">
          <p><img src="images/1.jpg" width="200"/></p>

          </a> </li>
        <li> <a href="info.html">
          <p><img src="images/2.jpg" width="200"/></p>

          </a> </li>
        <li> <a href="info.html">
          <p><img src="images/3.jpg" width="200"/></p>

          </a> </li>
          <li> <a href="info.html">
              <p><img src="images/4.jpg" width="200"/></p>

          </a> </li>
          <li> <a href="info.html">
              <p><img src="images/5.jpg" width="200"/></p>

          </a> </li> <li> <a href="info.html">
          <p><img src="images/6.jpg" width="200"/></p>

      </a> </li>
          <li> <a href="info.html">
              <p><img src="images/7.jpg" width="200"/></p>

          </a> </li> <li> <a href="info.html">
          <p><img src="images/8.jpg" width="200"/></p>

      </a> </li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div class="end">
  <p>版权所有 </p>
</div>
</body>
</html>

...

2.CSS

代码如下(节选示例):

@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
body{ width:100%; min-width: 1366px; background:#ddd; margin:0 auto; line-height:21px}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ margin:15px 0 0 20px; float:left}
.banner{ position:relative; }
.head{ background:#0f5356; height:100px}

.menu{ text-align:center; float:right; width:550px }
.menu li a{ padding:10px 20px; font-size:16px;color:#fff}.menu li {  float:left; padding:40px 0;  width:20%}

.right{ float:right; width:1000px; margin-right:20px; padding:0px}
.left{ float:left; width:260px; margin-left:20px; padding:0px}
.mid{ float:left; width:460px; margin-left:20px; padding:0px}
.content{ background:#fff ;  font-size:14px; padding-bottom:30px; width:100%}
.content,.banner,.ma{ width: 1366px; margin: 0 auto}
.content:after{ clear: both; display: block; content: ''}
.end{ clear:both; background:#0f5356; color:#fff; padding:30px 0; text-align:center;}
.produce img{  margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px; display:block}
.pics p{ text-align:center}

.imglist{ width:100%; margin:0 auto}
.imglist li{ float:left; width:300px; margin:15px ; text-align:center}
.scrollleft{ margin:0 0px}
.scrollleft li{ float:left; width:250px; margin-bottom:10px;}
.news li{ padding:5px;}

.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.js  div{ width:100%; clear:both; margin-bottom:20px; float:left}

.js div img{ float:left; margin-right:20px} 
.msg>div{ padding:10px}

.bar{ margin:0px 0; margin-bottom:20px;clear:both; line-height: 50px;  color:#0f5356; background:#fff ; border-bottom:#ccc solid 2px; font-size:15px;font-weight:bold; padding:10px}
.pics li img{ width:240px; height: 180px}
.tub li {
    
    background: #fff; width:100%; border: #ccc solid 1px;
    padding: 17px 0; font-size:16px; margin-bottom:7px; display:inline-block;
   

    color: #FFFF00; text-indent: 20px;
}.gqlist li {
    width: 100%; border-bottom:#ccc dashed 1px;
    float: left;
    padding:10px 0;
}.gqlist li  b{ font-weight:normal}
 .tub,.shaixuan{ margin: 20px}
 .shaixuan input,.shaixuan  select{ padding: 5px; vertical-align: middle}
.xuan{ padding: 0 20px}
.xuan li a{ display: inline-block; border: #ccc solid 1px; padding: 5px 15px; margin: 0 10px}
.xuan li { margin: 10px 0}

.pinlun{ margin: 0 20px}
.pinlun .box{ border-bottom: #ddd solid 1px}
.tool { text-align: center}
.tool a{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px}
.btn{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px; border: none}
.fss input,.fss  button{ padding: 10px}

...


五、总结

设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;

2.使用方便

要满足使用者的要求,网页适合使用,显示出其功能美;

3.整体性好

围绕一个统一的目标设计,强调整体的功能性; 

4.形象突出

尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。

5.交互式强

发挥网络的优势,想方设法使每个使用者都参与到其中来。


六、更多推荐

关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!

您的支持是我创作的动力!看到这里就【点赞收藏博文】,Thanks!

更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客


标签:Web,网页,li,padding,width,475,20px,margin
From: https://blog.csdn.net/A240307/article/details/141968237

相关文章

  • 受 LabelImg 启发的基于 web 的图像标注工具,基于 Vue 框架
    受LabelImg启发的基于web的图像标注工具,基于Vue框架  哟,网友们好,年更鸽子终于想起了他的博客园密码。如标题所述,今天给大家带来的是一个基于vue2的图像标注工具。至于它诞生的契机呢,应该是我导pass掉了我的提议(让甲方使用LabelImg进行数据标注),说是要把功能集成起来......
  • 长连接、短连接、WebSocket区别和使用场景
    长连接、短连接和WebSocket是网络通信中常用的概念,它们各自有不同的特性和适用场景。以下是它们的区别和使用场景:短连接定义:短连接(ShortConnection)是指客户端与服务器之间的连接在每次请求完成后立即关闭。这种方式在HTTP/1.0中是默认行为。特点:每个请求都需要建立和关......
  • AS-V1000视频监控平台web客户端播放实时视频和视频录像时,有个别画面出现卡顿和花屏问
    目录一、问题背景二、解决过程  1、检查平台进程  2、检查服务器CPU内存的使用情况  ①top/htop命令  ②vmstat命令  ③free命令  ④sar命令  3、检查网络带宽情况  三、最终效果一、问题背景  客户在公网测试服务器中的视......
  • 汉服女装商城购物主题html网页成品 | html学生网页源码
    文章目录网站主题网站描述网站介绍网站演示学习理念更多干货一、网站主题女装商城网站、女装购物网站、服装商城网站、购物商城网站、电商主题网站、网页设计与制作二、网站描述网页简介:此作品为学生网页设计毕设服装商城购物网页设计题材(汉服,是汉民族的传统服饰。又称......
  • javascript网页设计案例
    JavaScript在网页设计中扮演着重要的角色,能够实现动态效果和交互功能,提升用户体验。下面,我将通过一个具体的案例——“动态图片轮播”来展示JavaScript在网页设计中的应用。案例:动态图片轮播1.HTML结构<!DOCTYPEhtml><htmllang="zh"><head>  <metacharset="UTF-......
  • 时尚购物革命:Spring Boot技术在网页时装系统中的应用
    第1章绪论1.1背景及意义随着社会的快速发展,计算机的影响是全面且深入的。人们生活水平的不断提高,日常生活中人们对时装购物系统方面的要求也在不断提高,喜欢购物的人数更是不断增加,使得时装购物系统的开发成为必需而且紧迫的事情。时装购物系统主要是借助计算机,通过对时装......
  • 了解CSS布局——WEB开发系列29
    CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。一、正常布局流(NormalFlow)CSS的布局基础是“正常流”,也就是页面元素在没有特别指定布局方式时的默认排列方式。正常流分为两种主要类型:块级元素:默认情况下,块级元素......
  • Open WebUI官方库:解锁人工智能服务的官方通道
    OpenWebUI是一个开源项目,它提供了一个基于Web的用户界面,用于管理和操作各种本地和云端的人工智能模型。这个界面让用户可以方便地加载、配置、运行和监控各种AI模型,而无需编写代码或使用命令行界面。它支持多种大型语言模型(LLM),包括与Ollama和OpenAI兼容的API。Ope......
  • 基于JavaWeb开发的Java+SpringBoot+vue+element实现前后端分离玩具商城系统
    基于JavaWeb开发的Java+SpringBoot+vue+element实现前后端分离玩具商城系统......
  • java webservice 带请求头方式处理
    1、gradle引入依赖的增强第三方包implementation'org.apache.cxf:cxf-spring-boot-starter-jaxws:3.2.6'2、增强类方法packagewebservice;importcom.alibaba.fastjson.JSON;importcom.landray.kmss.sys.notify.webservice.Exception_Exception;importcom.landray.......