前端页面div设计的css模板-CSS-86后生记录生活

前端页面div设计的css模板

2023-09-07 阅读 30 评论 0

摘要：之前一直很烦CSS，现在做一个模板保存，以后要是用到，修改下就行【注意，根据需求自己修改；我没有做兼容性处理】【我CSS不太好，有错误的地方，我马上修改，欢迎指出】 ---------------------------------------------co

之前一直很烦CSS，现在做一个模板保存，以后要是用到，修改下就行【注意，根据需求自己修改；我没有做兼容性处理】【我CSS不太好，有错误的地方，我马上修改，欢迎指出】

---------------------------------------------common.jsp------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

---------------------------------------------index.jsp------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/static/jsp/common.jsp"%>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

<meta charset='utf-8'>

<meta name="description" content="不超过150个字符" />

<meta name="keywords" content="" />

<meta name="robots" content="index,follow" />

<link href="${ctx}/static/css/index.css" rel="stylesheet"
type="text/css">

<script src=""></script>

<link rel="shortcut icon" href="favicon.ico">
<title>Java数据解构和算法</title>
</head>
<body>
<div id="main">
  
  <div id="inner_top">
   
   内部最上层div
  </div>
  
  <div id="inner_navigation">
   
   内部导航层div
  </div>
  
  <div id="inner_contents">
   
   <div id="inner_contents_left">
    
    内部内容层左侧树div
   </div>
   
   <div id="inner_contents_middle">
    
    内部内容层中间详细内容div
   </div>
   
   <div id="inner_contents_right">
    
    内部内容层右侧更新栏目div
   </div>
   
  </div>
  
  <div id="inner_buttom">
   
   内部最底层div
  </div>
  
</div>

</body>
</html>

---------------------------------------------CSS------------------------------------------

div {
border: 1px solid #F00;
    text-align: center;        /*文字水平居中对齐*/
}

/**pc端css样式:开始**/
/**最外层div设置**/
#main {
width: 1347px;
height: 530px;
overflow: hidden;
}

/**内部最上层div设置**/
#inner_top {
width: 100%;
height: 5%;
  background-color:#ff00ff;
}

/**内部导航div设置**/
#inner_navigation {
width: 100%;
height: 5%;
background-color:yellow;
}
#inner_contents{
width: 100%;
height: 84%;
  background-color:#00ffff;
}
/**内部内容左侧div设置**/
#inner_contents_left{
height: 100%;
width: 15%;
float:left;
}
/**内部内容中间div设置**/
#inner_contents_middle{
  height: 100%;
  width: 65%;
  float:left;
}
/**内部内容右侧div设置**/
#inner_contents_right{
  height: 100%;
  width: 19%;
  float:right;
}
/**内部底部div设置**/
#inner_buttom {
width: 100%;
height: 5%;
background-color:#808000;
}
/**pc端css样式:结束**/

原文链接：https://808629.com/19530.html

发表评论: