正达管理后台首页的粗糙实现（练习）

最新推荐文章于 2020-12-14 21:19:34 发布
最新推荐文章于 2020-12-14 21:19:34 发布
阅读量399 收藏
点赞数
分类专栏： 学习 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OrdnAry/article/details/107849459
版权
本文记录了使用HTML和CSS进行正达管理后台首页的粗糙实现过程，主要涉及前端布局和样式设计的基础实践。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
    margin: 0;padding: 0;}
        ul{
    list-style: none;}
        a{
    text-decoration: none;color:#333333;}
        img{
    display: block;}
        h1,h2,h3{
     font-size:16px; font-weight: normal;}
        html,body{
     font-family: Arial; height:100%; overflow-y: hidden;}
        .l{
     float: left;}
        .r{
     float: right;}
        .clear:after{
     content:""; display: block; clear:both;}
        .header{
    height:80px;background-color: #018ffb;border-top:5px #424147 solid;}
        .header .header-bg h1{
     margin:19px 14px 0 20px;}
        .header .header-bg h2{
     color:white; font-size:24px; line-height: 25px; margin-top: 28px;}
        .header ul li {
    float:left;line-height:80px;;color:#FFFFFF;margin-right: 32px;}
        .header ul li .iconwode{
    font-size: 24px;position: relative;top:2px;left:-10px;float:left;}
        .header ul .li1{
    position: relative;top:-2px;}
        .header ul li a{
    color:#FFFFFF;}
        .left{
    width:200px;height:calc(100% - 85px);background-color: #424147;}
        .left ul{
    text-align: center;}
        .left li{
    height:145px;border-bottom: 1px #3a393e solid; border-top:1px #49484e solid;}
        .left li.active a{
    color:white;background:#4e4d53;}
        .left li a{
    color:#9a999e;width:100%; height:100%;box-sizing: border-box;display:block; padding-top:35px; }
        .left li i{
     font-size:40px;}
        .left li p{
     margin-top: 15px;}
        .main{
    overflow: hidden; height:calc(100% - 85px - 50px);}
        .main .main-content{
    height:100%; overflow: auto;}
        .main .main-onecontent .text {
    margin:21px 0 0 22px; color:#333333;}
        .main .main-onecontent .text h2{
    font-size:24px; line-height: 25px;}
        .main .main-onecontent .img{
    width:200px; height:149px; margin: 20px 20px 0 0;}
        .main .main-twocontent{
    width:100%; margin-top:20px;}
        .main .main-twocontent .sige_btns{
     height:54px; background:#f1f9fc; border-top:1px #e0eaef solid; border-bottom: 1px #dbe7ed solid;} 
        .main .main-twocontent .sige_btns ul{
    margin:14px 0 0 20px;}
        .main .main-twocontent .sige_btns ul li{
    float:left; width:108px; height:39px; border:1px #dbe7ed solid; border-bottom: none; background: #fbfeff; color:#666666; text-align: center; line-height: 39px; margin-right:12px; border-radius: 5px 5px 0 0; cursor: pointer;}
        .main .main-twocontent .sige_btns .active{
    color:white; background:#018ffb; position: relative;}
        .main .main-twocontent .sige_btns .active:after{
    content:""; display: block; position: absolute; width:11px; height:6px; background:url('./images/arrow.png') no-repeat; bottom:-6px; left:50%; margin-left:-6px;}
        .main .main-threecontent{
    margin:100px 20px 0 20px;}
        .main .main-threecontent>div{
    display: none;}
        .main .main-threecontent>div.show{
    display: block;}
        .main .main-threecontent .zl_upload1 , .main .main-threecontent .zl_upload2{
     width:110px; height:32px; line-height: 32px; text-align: center; font-size:14px; color:white; border-radius: 5px; cursor: pointer;}
        .main .main-threecontent .zl_upload1 input , .main .main-threecontent .zl_upload2 input{
     display: none;}
        .main .main-threecontent .zl_upload1 label , .main .main-threecontent .zl_upload2 label{
     cursor: pointer;}
        .main .main-threecontent .zl_upload1{
     background:#5FD15C;}
        .main .main-threecontent .zl_upload2{
     background:#34C1DA; margin-left:20px;}
        .main .main-threecontent .iconshangchuan1{
     font-size:12px; position: relative; top:-1px;}
        .main .main-threecontent .zl_search{
     width:210px; height:30px; border:1px #dbe7ed solid; border-radius: 5px; overflow: hidden;}
        .main .main-threecontent .zl_search input{
     border:none; width:177px; height:100%; color:#999999; font-size:14px; text-indent: 9px; position: relative; top:-3px; outline: none;}
        .main .main-threecontent .zl_search button{
     width:32px; height:32px; border:none; border-left:1px #dbe7ed solid; background-image: linear-gradient(#FCFDFD , #F1F9FC); cursor: pointer;}
        .main .main-threecontent .zl_search i{
     font-size:18px; font-weight: bold; color:#A1C6D4;}
        .main .main-threecontent .zl_table{
     clear:both; width:100%; border:1px #dbe7ed solid; font-size:12px; border-collapse: collapse; position: relative; top:20px;}
        .main .main-threecontent .zl_table tr{
     height:32px; border-bottom: 1px #e7eff3 solid;}
        .main .main-threecontent .zl_table tr:hover{
     background:#f1f9fc;}
        .main .main-threecontent .zl_table th{
     border-right:1px #dbe7ed solid; color:#666666; font-weight: normal; text-align: left; text-indent:12px; background:#f1f9fc
最低0.47元/天 解锁文章
OrdnAry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（249）:pc端管理后台制作5
歌谣的博客
12-29 246
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
前端学习（254）:pc端管理后台制作10
歌谣的博客
12-29 277
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
前端学习（245）:pc端管理后台制作1
歌谣的博客
12-28 413
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
前端学习（250）:pc端管理后台制作6
歌谣的博客
12-29 244
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
后台管理系统界面的PSD版本
03-19
喜欢做UI的朋友，这是个不利的选择哟，是PSD的哟。改改就能用。
前端学习（251）:pc端管理后台制作7
歌谣的博客
12-29 377
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
前端学习（253）:pc端管理后台制作9
歌谣的博客
12-29 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
正达排课软件
02-19
"正达排课软件"是一款专为教务工作者设计的高效、易用且完全免费的排课工具。这款软件的核心优势在于其灵活性和用户友好性，允许教务人员按照自己的需求和教学计划自由安排课程，充分体现了教务工作者的排课理念。在...
正达fd901网络摄像机专用查找器
12-21
【正达fd901网络摄像机专用查找器】是一款专为正达fd901型号网络摄像机设计的配置和管理工具。这款查找器旨在帮助用户方便地定位、连接和配置他们的fd901型号摄像机，尤其适用于那些在安装或管理过程中遇到困难的...
海康正达大华监控设备配置.docx
10-14
海康正达大华监控设备配置 本文档主要介绍海康正达大华监控设备的配置步骤和注意事项。下面是对每个部分的详细解释： 一、海康设备配置 * 海康设备默认 WEB 登录与设置： + 默认密码：12345 + 默认登录名：...
正达排课软件 V9.6 (free)
05-03
经过一年多的下载和测试，试过的自动排课软件起码有几十个，免费的没有一个可以用，今天终于找到一个，经过反复测试，发现很好用，可以导出到EXCEL表格，也可以直接打印，特此分享！其内核采用EXCEL做的。...
JSP连接MySQL学生信息管理系统（实现增删改查）github求点赞
热门推荐
OrdnAry的博客
05-06 1万+
1.首页面shujuku.jsp shujuku.jsp <%@ page contentType ="text/html ;charset = UTF-8" pageEncoding="UTF-8" import="java.sql.*"%> <HTML> <head> <meta http-equil="Content-Type" content...
用 gulp require.js 和 jQuery 写一个小米项目之-----轮播图和左侧导航栏的实现
OrdnAry的博客
12-06 9402
gulofile.js中的配置 /* 把 .scss文件 => csswenjian =>压缩 => min.css */ const gulp = require("gulp"); const scss = require("gulp-sass"); const minifyCSS = require("gulp-minify-css"); const rename = require("gulp-rename"); gulp.task("scss",function(){
web前端----------网易云音乐播放器简单的实现（素材自行下载）
OrdnAry的博客
07-24 3551
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body,ul,li,p{margin:0;padding:0;} ul{list-style:none;} #main{ width:400px; height:600px;
用ajax +bootstrap实现前后端交互之 注册，登录，查询数据，修改和删除数据（css自行下载）
OrdnAry的博客
09-07 2917
1.1 注册页面 register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <style> #register{width: 400px; marg
web前端十种图片的hover效果（粗糙）
OrdnAry的博客
07-18 2613
<!-- 十种图片hover效果： 1.分析网页内容： 可视化窗口，背景纯色蒙版，图片 html结构和标签 div#d3 > div img 2.网页中基本修饰：尺寸宽高 和初始位置 颜色 背景 3.做效果需要配合什么样的样式属性 :hover --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title
用js实现banner图效果
OrdnAry的博客
09-03 1620
函数startMove的实现 function startMove(node, cssObj, complete){//complete = show; clearInterval(node.timer); node.timer = setInterval(function(){ var isEnd = true; //假设所有的动画都到达目的值。 for(var attr in cssObj){ var iTarget = cssO
用 gulp require.js 和 jQuery 写一个小米项目之-----滚动商品和下面商品加载的实现
OrdnAry的博客
12-14 1191
滚动商品slide.js //滚动商品的函数 define(["jquery"],function($){ function download(){ $.ajax({ url:"../data/slide.json", success:function(res){ //获取数据 var slideArr = res.data.list.list;
正达建筑内部管理平台素材
最新发布
04-25
正达建筑内部管理平台是一个用于建筑行业的综合管理平台，旨在提供高效、便捷的管理解决方案。该平台涵盖了以下主要功能模块： 1. 项目管理：可以对建筑项目进行全面管理，包括项目信息录入、进度跟踪、人员调度、材料采购等。 2. 人力资源管理：用于管理企业内部的人员信息，包括员工档案、考勤管理、薪资发放等。 3. 财务管理：用于管理企业的财务情况，包括收支记录、报表生成、财务分析等。 4. 物料管理：用于管理建筑项目所需的物料信息，包括库存管理、采购管理、物料流转等。 5. 设备管理：用于管理企业所拥有的设备信息，包括设备档案、维修保养、设备调度等。 6. 品质管理：用于监控和改进建筑项目的品质，包括质量检查、整改措施跟踪等。 7. 安全管理：用于确保建筑项目的安全，包括安全检查、隐患排查、安全教育等。 8. 文档管理：用于管理企业内部的各类文档，包括合同文件、技术资料、工作报告等。 以上是正达建筑内部管理平台的主要功能模块，通过该平台可以实现建筑项目的全面管理和协调。如有需要，请详细描述您对该平台素材的具体需求，我可以为您提供更详细的信息和资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值