DOCTYPE--我好恨

 

     本来我就一介俗人,加上又不是天资聪慧那种,这些年下来,记忆力退步很多。CSS和DIV自学成才(貌似还没变才,略懂些皮毛),但出于朋友的信赖,他们遇到问题无法解决的,还是会问下我。

     今天一学妹在学习web的过程中,遇到一怪异的问题:大致问题是定义的样式,无法居中。我想,这不好办,margin:0 auto!over

于是高兴的答应下来,下午去她那边,还顺便挖到一顿中饭。

     css里的样式定义如下:

     #container

{

margin:0 auto;

background-color:#33333;

....

}

 margin居中的定义是网络中用的最多的一种,应该没什么问题,她电脑是vista,用的是IE8,我想会不会是这么原因,下了个firefox,页面照旧没变,div那一块还是贴在左边。

难道在body的style有什么设置,但是她根本没有对body做过设置,于是我在定义了个 body{margin:0}

问题照旧。

急啊,html很“简朴”基本结构加上一个DIV。这下把我看的傻了,why....

html真是太过简朴了,我瞄了一眼,<html>..</html>,少了什么,对了是 DOCTYPE的申明,,偶的神啊!

赶紧加上,ok,DIV居中了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

“DOCTYPE申明的一种标准,让brower去理解偶们写的CSS该怎么表现”

她晃荡着脑袋说“不明白”。

我说

“比如麻将,按台湾打法和杭州打法,那么就很有区别,虽然同样都是麻将,但是打出去的效果就不样了,话说我也是由于习惯问题,在一次和朋友玩麻将的时候,第一张就打出了财神(囧)......害得我至今不敢在碰麻将。”

 

学妹连连点头,看来她对麻将的理解比CSS要强很多!:)

 

学妹买了本自学CSS的书,书面上那是花花绿绿的,于是她就用TEXTPAD,来开始编写,听说这样对学习CSS有很大好处,纯手工。

但是偶习惯用Dreamweaver了,而DOCTYPE在DREAM中新建的时候都是默认添加的,所以偶是浑然不觉,直到吃过一次大亏。

这应该算是基本的知识,但是习惯工具的我们,往往会忽略这些。

 

 

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>七夕 | 星河渡鹊桥</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 水墨风渐变背景:低饱和粉褐→浅紫,模拟宣纸质感 */ body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(160deg, #f8edeb, #e8e2f8, #f8edeb); background-size: 200% 200%; animation: bgFlow 15s ease infinite; overflow: hidden; font-family: "SimSun", serif; /* 宋体增强古典感 */ color: #5c3d2e; /* 深褐红,模拟墨色 */ } /* 标题:瘦金体风格,hover显星河阴影 */ .title { font-size: 4.5vw; font-weight: 400; margin-bottom: 15px; position: relative; cursor: pointer; transition: all 0.6s ease; } .title::after { content: "星河渡鹊桥"; position: absolute; top: 0; left: 0; color: transparent; text-shadow: 0 0 12px rgba(129, 102, 215, 0.3); opacity: 0; transition: opacity 0.6s ease; } .title:hover::after { opacity: 1; } /* 诗词区:半透明纱感背景,模拟古卷 */ .poem-card { background: rgba(255, 253, 250, 0.6); border: 1px solid rgba(184, 155, 135, 0.3); border-radius: 12px; padding: 35px 45px; margin: 20px 0; box-shadow: 0 4px 15px rgba(184, 155, 135, 0.1); transition: all 0.4s ease; } .poem-card:hover { box-shadow: 0 6px 20px rgba(184, 155, 135, 0.2); transform: translateY(-3px); } .poem-line { font-size: 1.8vw; line-height: 2.5; text-align: center; letter-spacing: 2px; } /* 点缀元素:鹊桥轮廓+慢闪星点 */ .magpie-bridge { width: 280px; height: 3px; background: linear-gradient(90deg, transparent, rgba(184, 155, 135, 0.5), transparent); margin: 10px 0; position: relative; } .magpie-bridge::before, .magpie-bridge::after { content: ""; position: absolute; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 223, 130, 0.7); /* 星点色 */ animation: twinkle 4s ease-in-out infinite; } .magpie-bridge::before { left: 30%; animation-delay: 0s; } .magpie-bridge::after { right: 30%; animation-delay: 1.5s; } /* 动态元素:缓慢飘移的云状爱心(弱化现代感) */ #decor-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .drift-love { position: absolute; color: #c8a2c8; /* 淡紫粉,低饱和不刺眼 */ opacity: 0.4; animation: drift linear infinite; } /* 背景流动动画:慢节奏更显雅致 */ @keyframes bgFlow { 0% { background-position: 0% 60%; } 50% { background-position: 100% 40%; } 100% { background-position: 0% 60%; } } /* 星点闪烁动画 */ @keyframes twinkle { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } } /* 爱心飘移动画:慢且不规则,模拟云移 */ @keyframes drift { to { transform: translate(calc(Math.random() * 50px - 25px), 100vh) rotate(360deg); opacity: 0; } } /* 响应式:手机端适配诗词与标题大小 */ @media (max-width: 768px) { .title { font-size: 7vw; } .poem-line { font-size: 3.5vw; line-height: 2.2; } .poem-card { padding: 25px 20px; } .magpie-bridge { width: 200px; } } </style> </head> <body> <!-- 装饰元素容器:飘移爱心 --> <div id="decor-container"></div> <!-- 主内容:古典意象+诗词 --> <h1 class="title">七夕</h1> <div class="magpie-bridge"></div> <div class="poem-card"> <div class="poem-line">纤云弄巧,飞星传</div> <div class="poem-line">银汉迢迢暗度</div> <div class="poem-line">金风玉露一相逢</div> <div class="poem-line">便胜却人间无数</div> </div> <div class="poem-line">—— 愿今夕良辰,岁岁常伴 ——</div> <script> // 生成慢飘移的低饱和爱心(弱化现代感,贴合古典氛围) function createDriftLoves() { const container = document.getElementById('decor-container'); const loveCount = 18; // 少量更显雅致 for (let i = 0; i < loveCount; i++) { const love = document.createElement('div'); love.className = 'drift-love'; love.textContent = '❤️'; // 随机参数:更慢、更柔的飘移动态 const size = Math.random() * 15 + 8; // 小尺寸:8-23px const left = Math.random() * 100; // 水平位置 const duration = Math.random() * 25 + 20; // 慢下落:20-45s const delay = Math.random() * 8; // 延迟:0-8s // 赋值样式 love.style.fontSize = `${size}px`; love.style.left = `${left}%`; love.style.top = `-${size * 2}px`; love.style.animationDuration = `${duration}s`; love.style.animationDelay = `${delay}s`; container.appendChild(love); // 动画结束移除,避免内存占用 setTimeout(() => love.remove(), (duration + delay) * 1000); } } // 初始化并循环生成(每30秒补一次,节奏更缓) createDriftLoves(); setInterval(createDriftLoves, 30000); // 点击标题触发一次爱心飘移,增加互动感 document.querySelector('.title').addEventListener('click', createDriftLoves); </script> </body> </html>
08-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值