一个CSS文件样式

马黑黑

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

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

                               
登录/注册后可看大图

@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; } /* 红色字体 */

                               
登录/注册后可看大图

马黑黑

马黑黑

测试：

//高亮颜色对象
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[key]); //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[0].length);
				hls[rkey].add(range);
			});
		});
	}
};

<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>

//高亮颜色对象
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[key]); //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[0].length);
				hls[rkey].add(range);
			});
		});
	}
};

花飞飞

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

马黑黑

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

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

花飞飞

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

原来路过就好，给这个贴子打一百二十分

梦江南

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

梦江南

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

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

马黑黑

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