一个CSS文件样式

马黑黑 发表于 2022-1-7 18:01

以下是我的网站正在使用的CSS样式，编写于很多年以前。网站设计时使用utf-8（无签名）编码，所以第一句是 @charset "utf-8"; ，它与 HTML 文件同一个编码，保存时文件的编码必须选择为UTF-8（无签名）。使用默认编码的这一句要删除掉或指明为其他编码（如 GB18030、GB2312、GBK）等。

该文档不是很复杂，它主要是规定了 body、p、a、img 等的基本样式，几个用于搭建网页框架的 id 选择器，一些可以反复调用的类选择器，仅此而已。因为相对简单，所以用来做示范供学习参考之用。

static/image/hrline/1.gif

@charset "utf-8";

body {
margin: 0px;
font: 14px/1.5 NSimSun, SimSun, Verdana, Geneva, Sans-Serif;/* 14px是字体大小，1.5是行高 */
background: #42413c;
color: #ccc;
}

p { margin: 0px; padding: 6px 0px; }

a {
text-decoration: none;
color: #3f48cc;
}

a:hover, a:visited:hover { color: #ff0000; }

a:visited { color: #005344; }

img { border: 0px; }

/* 主容器自适应宽度 */
#container {
margin: 0px auto;
width: 80%;
max-width: 1200px;
min-width: 1024px;
}

/* 顶部 */
#top {
padding: 0px;
color: #ccc;
min-height: 80px;
}

#top p {
margin: 0px;
padding: 0px;
}

#top a { color: #fff; }

#top_left {
width: 200px;
float: left;
}

#top_right {
padding-right: 8px;
float: right;
}

/* 导航条 */
#nav {
height: 28px;
line-height: 28px;
background: #efefef;
color: #000;
border-bottom: 3px solid #006000;
border-radius: 4px 4px 0px 0px;
opacity: 0.9;
clear: both;
}

#nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav ul li {
margin-left:2px;
float:left;
}

#nav ul li a {
display: block;
width: 87px;
height: 28px;
line-height: 28px;
text-align: center;
background: #16953f;
color: #fff;
font-size: 14px;
}

#nav ul li a:hover {
background: #008000;
color: #eee;
}

#nav ul li a span {
margin-left: 3px;
width: 0px;
height: 0px;
font-size: 0;
border-width: 4px;
border-color: #eee transparent transparent;
border-style: solid;
}

#nav ul li a#current {
background: #006000;
font-weight: bold;
color: #eee;
}

#nav ul li ul {
border: 1px solid #ccc;
display: none;
position: absolute;
}

#nav ul li ul li {
margin: 0px;
width: 160px;
background: #16953f;
color: #000;
float: none;
}

#nav ul li ul li a {
background: none;
width: 160px;
text-align: left;
text-indent: 8px;
}

#nav ul li ul li a#scurrent {
background: #007d65;
color: #fff;
}

#nav ul li ul li a:hover {
background: #007947;
color: #fff;
}

#nav ul li:hover ul {
display: block;
}

/* 纵向中部容器 */
#main {
background: #fff;
color: #000;
padding: 1px;
}

/* 左栏 */
#mainside {
width: 260px;
border: 1px solid #aaa;
padding: 0px;
float: left;
}

/* 右栏 */
#maincont {
margin-left: 262px;
border: 1px solid #aaa;
padding: 0px;
border-left: 0px;
overflow: hidden;
}

/* 右栏的上部左边首页用 */
#mmleft {
width: 40%;
min-width: 260px;
min-height: 350px;
float: left;
}

/* 右栏的上部右边首页用 */
#mmright {
width: 50%;
min-height: 350px;
border: 1px solid #ccc;
margin: 4px;
padding: 6px;
float: right;
}

/* 右栏下部首页用 */
#mmbottom {
padding: 10px;
clear: both;
}

/* 底部 */
#bottom {
padding: 10px;
font-size: 12px;
text-align: center;
}

#bottom a { color: #fff; }

/* 返回顶部专用 */
#sDiv {
position: fixed;
left: 90%;
bottom: 20px;
display: none;
width: 32px;
height: 32px;
}

/* 评论 */
#comm { padding: 0px 8px; }

/* 边框样式 */
.border { border: 1px solid #aaa; }

/* 左栏标题样式一 */
.left_tt_bg1 {
background-color: #efefef;
color: #000;
padding: 6px 4px 4px 6px;
border-bottom: 1px solid #808080;
}

/* 左栏标题样式二 */
.left_tt_bg2 {
background-color: #efefef;
color: #000;
padding: 6px 4px 4px 6px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
}

/* 正文规范 */
.cont {
background-color: #fff;
color: #000;
padding: 8px;
white-space: normal;
word-wrap: break-word;
font-size: 14px;
}

/* 正文辅助 */
.position {
font-size: 13px;
color: #777;
padding: 4px;
text-align: left;
}

/* 居中 */
.mid { text-align:center; }

/* 居右 */
.right { text-align: right; }

/* 右浮动 */
.fright {
padding-right: 8px;
float: right;
}

/* 标题样式取代 H */
.title {
font-size: 200%;
font-weight: bold;
text-shadow: 0 1px 1px #aaa;
}

/* 阴影边框样式 */
.shadow {
border: 1px solid #aaa;
border-radius: 6px;
box-shadow: 2px 2px 2px #ccc;
}

/* 深色框 */
.dark {
background: #ccc;
color: #000;
border: 1px solid #aaa;
}

/* 浅色框 */
.grey {
background: #eee;
color: #000;
border: 1px solid #aaa;
}

.red { color: #ff0000; } /* 红色字体 */

static/image/hrline/1.gif

马黑黑 发表于 2024-9-18 23:48

马黑黑 发表于 2024-9-18 23:49

<h2>测试：</h2>
<div class="hE"><pre>
//高亮颜色对象
let heColors = { darkred: regDarkred, red: regRed, blue: regBlue, cssblue: regCssblue, codered: regCodered, magenta: regMagenta, green: regGreen };

//注册颜色
const setHighlight = () => {
hls.length = regs.length = 0;
Object.keys(heColors).forEach((key,idx) => {
const hlColor = new Highlight();
hls.push(hlColor); //color
regs.push(heColors); //regix
CSS.highlights.set(`he-${key}`, hlColor);
hlColor.priority = idx + 1;
});
};

//着色
const hlight = (codebox) => {
if(!CSS.highlights) return;
if(CSS.highlights.size === 0) setHighlight();
const walker = document.createTreeWalker(codebox, NodeFilter.SHOW_TEXT);
while(walker.nextNode()) {
let textNode = walker.currentNode;
let text = textNode.textContent;
regs.forEach((reg,rkey) => {
let res = text.matchAll(reg);
res.forEach(r => {
const range = new Range();
range.setStart(textNode, r['index']);
range.setEnd(textNode, r['index'] + r.length);
hls.add(range);
});
});
}
};
</pre></div>

<div class="hE"><pre id="code">
<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#008000" stroke-linecap="round"></svg>

<script>
drawHexagon = (total) => {
let pathstr = '\n\t<defs>', usestr = '';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
let bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
pathstr += `
<path id="r${id}">
<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
</path>`;
Array(total).fill(0).forEach((u,k) => {
u = k + 1;
let angle = id % 2 === 0 ? 360 / total * k + 30 : 360 / total * k;
usestr += `\n\t<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"></use>`;
});
});
pathstr += '\n\t</defs>\n';
return pathstr + usestr + '\n';
};

hsvg.innerHTML = drawHexagon(6);
</script>
</pre></div>

<div class="hE"><pre>
//高亮颜色对象
let heColors = { darkred: regDarkred, red: regRed, blue: regBlue, cssblue: regCssblue, codered: regCodered, magenta: regMagenta, green: regGreen };

//注册颜色
const setHighlight = () => {
hls.length = regs.length = 0;
Object.keys(heColors).forEach((key,idx) => {
const hlColor = new Highlight();
hls.push(hlColor); //color
regs.push(heColors); //regix
CSS.highlights.set(`he-${key}`, hlColor);
hlColor.priority = idx + 1;
});
};

//着色
const hlight = (codebox) => {
if(!CSS.highlights) return;
if(CSS.highlights.size === 0) setHighlight();
const walker = document.createTreeWalker(codebox, NodeFilter.SHOW_TEXT);
while(walker.nextNode()) {
let textNode = walker.currentNode;
let text = textNode.textContent;
regs.forEach((reg,rkey) => {
let res = text.matchAll(reg);
res.forEach(r => {
const range = new Range();
range.setStart(textNode, r['index']);
range.setEnd(textNode, r['index'] + r.length);
hls.add(range);
});
});
}
};
</pre></div>

</div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/helight.js';
document.body.appendChild(sc);
</script>

花飞飞 发表于 2024-9-19 22:18

网站只知道用，不知道还有这么多的设置。现在是时候学习一下了。{:4_199:}

马黑黑 发表于 2024-9-19 22:54

花飞飞发表于 2024-9-19 22:18
网站只知道用，不知道还有这么多的设置。现在是时候学习一下了。

这个不用学，这个帖子是测试用的

花飞飞 发表于 2024-9-20 21:31

马黑黑发表于 2024-9-19 22:54
这个不用学，这个帖子是测试用的

{:4_170:}原来路过就好，给这个贴子打一百二十分

梦江南 发表于 2024-9-21 08:30

这代码做出来的闪条，可以当隔线条用了。真神奇！{:4_199:}

梦江南 发表于 2024-9-21 08:32

马黑黑发表于 2024-9-18 23:48

这也是用代码编出来的？太不可思议了！

马黑黑 发表于 2024-9-21 11:47

花飞飞发表于 2024-9-20 21:31
原来路过就好，给这个贴子打一百二十分

{:4_190:}

页: [1]

花潮论坛's Archiver

一个CSS文件样式