Tao ying

1. CSS2CSS2 2. CSS3CSS3 3. HTML4HTML5 4. HTML5HTML5

CSS 命名规范页面外围控制整体布局宽度：wrapper、页头：header、页面主体：main、内容：content、页脚：footer、导航：nav、主导航：mainbav、子导航：subnav、顶导航：topnav、边导航：sidebar、左导航：leftsidebar、右导航：rightsidebar、菜单：menu、子菜单：submenu、搜索：search、栏目：column、侧栏：sidebar、功能区（商品模块）：shop、左右中：left right center、登录：login、登录条：loginbar、注册：regsiter、标志：logo、横幅广告：banner、热点：hot、新闻：news、按钮：btn、滚动：scroll、标签页：tab、文章列表：list、 标题：title、摘要：summary、提示信息：msg、小技巧：tips、图标：icon、下载：download、加入我们：joinus、注释：note、指南：guild、服务：service、状态：status、投票：vote、合作伙伴：partner、链接：link、友情链接：friendlin ...

04245d9982ec82ad29febc4ea2d4621578b21015b656ff9a77f7fef3cf9df1f9b3eb928cc5c244ebb78d586a77e8cf46b1ca3714880ba7fc306b29acd3cff1d3a5220d0e23195affbefea25fc04c7271c8f0a3a3eaa9fabdfca580c416c14e063fa4f22c9f85af966079e5458a68951b6426ac66aa54a0f74f01bf947e7f09c3e788f7990dc4febc5466c2c2fafc25bbc7c3c34f37c6bbacd9a6864e61e841318c932bb836de6b3d36039590ec5693239bc1bd2c5d417d3fdac68bd37e3b92b74b3217cd36bc248f79627ec704bbcd29f1bcc6bde67508feb8a83da10db890429ca51fd483ac6224e69d6e7be0b66dc42c46fbc9585dfa82 ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c7087604c970a01145d89d8b4c412b9187dbbf3f250aeb6823515b3ec647d8fd27a5385f3ec437f54cfc46e9d6f9bec06e034a947022727e397bc9ebfee10f1503ba87ddd576eaf0ad83fed4f49a02a5bc9732db197bebd929a95ec1a96bc5725199902767618cbd7794762a7e48a1d3cc49dfa19e4daeeedb79d4af74906ad1ee2118e9f6fb13676fbbb4e13d696f863760c5aeb711b4ca36293ef5648855d3591dfebf12d630eda7e1489dd11a1bbd1f4b71199243a9316447d7b6bbcafd0ccf708f15b3242b3bf8d9a0db22f2150fe1f78e1c4176b6201eb4d ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c70873274b009e59daa43c0c45e3d2619d2d6331ff12dd43883df957fd26c747dd2070018819b91b8c7555899ef2401a8df52c1b64fe2b73a003e50f2a26351e2f2d89811144f6654eed9ddc04ce3122eac6015c4fb6f6d9eb7d6e5e36240df031344860a7e255c64b89505f3cd51d439f0caab2f0d6bbb95fa3c884d3ce1d5cdb870bb63309e594158863dd6c022e1b158dbff9957e77743199ebc22edbfd8a4a85da911029b88205195fe8d9ae79f09e2f507a05a2a336333b6b9782952777e7ef10354caca07d56844b263a360003c2db7f206b8416cf05ad9 ...

04245d9982ec82ad29febc4ea2d46215de53453d2e1d2dc526f5dc797ee738365303a2c9aaef2a9acfbcd30bce24334802092987dd190e2939fb839253810380714dc0fae41dfe4d2f323312f31a7245fe55c3542ffae92729306e993e09671b93a2d4461a08602f88a2f0ec616051604dab245ec35bf2744a37ac53e8b612facf2188750e88308e2322fe49f3ac5d174397837eebe26002389c6f2076263257cb303c3b6d6d263c72abb430a1c1edcd426a890afd1d7c80828d09abde6dac0aadd05fb01b5963c58e1171754ca3afdd55a357641fff07cfa26436f079d08af0c3ada54a9d96fc1a1494bf82e407194d042c2445fd871228 ...

04245d9982ec82ad29febc4ea2d462155217d667e2e1652fc6848daed715c4a8380b031c4878c0ee4bbe019159f7f0026025145c58f0a42ce2b5dc3dd97ea98fa32812079c4cae8e0e7901ba530a0428f025a715cb543ee379b194d6b1ab365296839a19a294a4fa2e07b0673baf64878b23de03494bdd03905d2966a830eac2ef7d7ba01554fd9bfc573852467431ecbfbe70d221c0434cb0512eb23f6fc4ee9385b8386b20cd317f83097983390deb796d3bd645e196b8c1a0d993bee6bee2d70df2633ad6bf11dd8f4755d7ab3e3794b1628bd3a0c44089c068f4a003de1da3cf9c52d838ef9b34a36f8603aab743606678c95a5d42c0 ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c70875810b90683e264b169f2c12d0335f72c4c06e6af6434bc751c038c57630aeafdda572a501bff103a52c130ae62cd3c89663858295e354b3dca7fc50b8fe3be2bc2bc4827a724ce4f83230289911b1b64930354cda37dbbb476648b17976f01a6ddc324e7d952a82d84b90ed01824585aa9ebbc30420fa5b624acf7e040ee28d69e9b38a1e535bb2af723c2f02be4a3f4bf5f601ba9055e93de41a0c3999388a42786f7be816d56944011e3bb1f9d5df9bf9fc4b69516d722598671f5cc1fb7f6bf6a76bc6406e2a1322121f27fbb8eda59e3efe9c2dbf1c6 ...

一、移动端基础1.1 浏览器现状由于移动端浏览器的发展比较晚，所以主流移动端浏览器的内核都是基于 Webkit 内核打造的。 我们在进行移动端的页面开发时，兼容性主要考虑 Webkit 内核。 1.2 手机屏幕现状目前无论是 安卓 还是 IOS，移动端设备的屏幕尺寸非常多，碎片化非常严重。 但是，前端页面开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px。 1.3 常见移动端屏幕尺寸目前移动端的屏幕尺寸非常多，并且随着发展还会越来越多。 但是，对于移动端的 Web 开发来说，我们不用考虑太多。 对于专门的 安卓 和 IOS 开发，才需要特别关注 dp、dpi、pt、ppi 等单位。 1.4 移动端调试方法 Chrome DevTools（谷歌浏览器）的模拟手机调试 搭建本地 Web 服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接 IP 或 域名 访问 1.5 总结 移动端浏览器我们主要对 Webkit 内核进行兼容 我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 学会用谷歌浏览器模拟手机界面以及调试 二、 ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c70875de078083cd2088e845e25af396f8256180201b16d25cba761b3340b8c6057ce3b6e969b4ae9abe8042ef13a7595cf504c9b7b418a5030f30d26bf3bf7302e909ec02362f4d397790482bdbde3eb5f160a6d58c2ab5d040a1dbf42796a7c1633ad46f9f200a301fdc4b4f97bafbcbe5af188bb4a903edacaf855e9012e77f9f6048e93ed8ad122ace9260bde70e9d20cf976f4b56cbb2063ae9285f2c2f557e95d747306940654926decd97e593b8977ccd57d2fa89be51aa5ec037e6b2340675d8d05d4c4c86cd0c334ed6716f972688ebb3dd8f99aa1c5 ...

电商—主页 电商—分类列表页 电商—注册页 一、品优购项目规划1.1 网站制作流程 原型图： 1.2 品优购项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 1.3 品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 1.4 开发工具以及技术栈 开发工具 VSCode 、Photoshop、主流浏览器（以 Chrome 浏览器为主） 技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范 总结 品优购项目整体介绍 （制作首页、列表页、注册页三个页面） 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术） 开发工具以及技术栈 （切图用 ps ...

一、HTML5的新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题（例如：移动端），便可以大量使用这些新特性。 声明：新特性增加了很多，但是我们只需专注于开发常用的新特性即可 1.1 HTML5新增的语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。 1234<div class=“header”> </div><div class=“nav”> </div><div class=“content”> </div><div class=“footer”> </div> <header>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档的某个区域 <aside>：侧边栏标签 <footer>：尾部标签 ...

一、margin负值的运用如何实现以下效果呢？ 多个盒子紧挨在一起，当鼠标放在其中一个盒子上时该盒子的边框自动变色。 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框（否则边框会发生叠加 * 2） 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果周围盒子没有定位，则对当前盒子加相对定位（保留位置并显示在其他盒子之上）；如果周围有定位，则提高当前盒子的 z-index） 1234567891011121314151617181920212223242526272829303132333435363738394041424344<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c70872ec3a5c5322931c37fa80c8e63843dd224626ebf0afcd6cf50d76419243d5904bf7de5a7751cd8b00525d7bbbe28123b227ee989956be124353a1f3e2d7b5fcd723a39c386155184b69f62d925f2ca0b64d0e91df47fc7ff2a26ee15235b652456296d50f629b7619b947c9b120fcfa9ad5565f017fea9bed08300f00ec9d723ff41b1c14dc8030bedeced37bd597b4b6e9ff5e0cba0dbb8e0a7888c554ae5b687ada7ea482a7e352f0f6560571e24077a94a3194dc1324d03399b404f0ee3da1823dc92ba681098780c8c1e3d53aa74e0a47d531cfec254 ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c70872890bdf5d0742d7acbde0328b483d27fe2946d0f5fecfd4458cbb8dcc832fcd81a79dbb3ddbac9e0e2d3fc5dcf67ed8c30abcc4d1d37d82176ff8dda18606f078ea4391d71af28ea439de7775ef49bba505392e116f182b4ad5d739b8013eeadc97071263faa6656f5f9a3727ef4439d35d6fc36066e43f7ecdd62655ce61b88e1e353d359bdd70c16dcb6e92cb0bb987242796ffdf30bfa1fdc5c4c928ffead1ef43ab9c0f54e4645277e644cb30d90afe1a7cb7ec9b38c2f15ff83cf07b3d54b242b771f20a934e76e08a1045598683219f107fe087b64 ...

一、准备素材和工具 学成在线 PSD 源文件 开发工具 = PS（切图）+ VSCode（代码）+ Chrome（测试） 二、案例准备工作我们本次采取结构与样式相分离思想： 创建 study 目录文件夹（用于存放我们这个页面的相关内容） study 目录内新建 images 文件夹，用于保存图片 新建首页文件 index.html（以后我们网站首页统一规定为 index.html） 新建 style.css 样式文件作为我们本次采用的外链样式表 将样式引入到我们的 HTML 页面文件中 样式表写入清除内外边距的样式，来检测样式表是否引入成功 三、CSS属性书写顺序建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-a ...

04245d9982ec82ad29febc4ea2d462152c9e8f61aedc774e16f3bd31c52c7087c2ce8557907c30287d82748312fc4dc2aaedbbbe3c2ef7212ee18e78f9879079a6162b5c526fd13d057530bb9282afd40644ebd5c5dd9f5d3900e28b57cd8c2911772dae86073dfe42e6ae250c5b1a92b4b4ccca6a49a6a7507346d3b5af6d35b0a3d75b2bfdaa8eb5fc778e051575a3f32c68f00ff03ba732bfdc8993414b187cb9a8b942af077978e5122796aa9d4288b7da558b6a99e8342e2a9cc1af4b3ff22823f0644d593f34e07fa29956ad4ff896baf1ac58e879c7bc8863a41cd0f2038d36c999fa67c1765f39d11b96813b38388091a7d8ab1f ...

一、圆角边框CSS 3 新增了圆角边框样式。 border-radius 属性用于设置元素的外边框圆角。 语法： 1border-radius: length; 原理： border-radius 顾名思义：边框半径。 （椭）圆与边框的交集形成圆角效果。 1234567891011121314151617181920212223<!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-UA-Compatible" content="ie=edge"> <title>圆角边框</title> <s ...