diff --git a/BLOG.md b/BLOG.md new file mode 100644 index 0000000..9c6df9d --- /dev/null +++ b/BLOG.md @@ -0,0 +1,29 @@ +## 9/14/2015 8:12:38 PM 扁平化BLOG页面构建 ## +###构建带图片的文档预览效果### +**HTML部分** + +```html +

又一个标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt et illum quaerat laborum voluptatem alias eveniet distinctio at nisi dolorum nulla nostrum soluta, ipsum beatae officiis, praesentium autem.

+``` +**CSS部分** +```css +.image-section{ + width: 45%; +} +.image-section img{ + width:100%; +} +…… +``` + +由于父标签div.image-section，只占据半行空间（width:45%)。此时，其子元素图片img标签，必须指定其图片宽度属性（width：100%），如果不加指定，图片将显示原有图片尺寸。 + +###制作更多的图片预览文档### +复制完成的article-preview section部分代码，以快速完成其余代码部分。此时，会发现两个相邻article-preview section之间有一个缝隙。（如图所示）他不是margin,也不是padding，更不是height导致的。而是由font-size导致的，可以将article-preview的font-size重置为0，以清除该缝隙。 diff --git a/Exercise/cs01-blog/css/reset.css b/Exercise/cs01-blog/css/reset.css new file mode 100644 index 0000000..ca6e8c9 --- /dev/null +++ b/Exercise/cs01-blog/css/reset.css @@ -0,0 +1,52 @@ +/* v1.0 | 20080212 */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/Exercise/cs01-blog/css/style.css b/Exercise/cs01-blog/css/style.css new file mode 100644 index 0000000..4b16e34 --- /dev/null +++ b/Exercise/cs01-blog/css/style.css @@ -0,0 +1,147 @@ +@charset "utf-8"; +body{ + color:#fff; +} +a{ + text-decoration: none; +} +h1{ + font-size: 40px; +} +nav{ + background-color: #ccc; + height: 50px; +} +.logo{ + width: 200px; + height: 50px; + line-height: 50px; + float: left; + font-size: 20px; + font-weight: 700; + letter-spacing: 1px; + margin-left: 20px; +} +#banner +{ + background-color: #777; + height: 700px; +} + +ul{ + float: right; + margin-right: 20px; +} +ul li{ + display: inline-block; +} +ul li a{ + line-height: 50px; +} + +#banner .inner +{ + max-width: 300px; + text-align: center; + margin: 0 auto; + position: relative; + top:160px; +} + +#banner .inner h1{ + margin:0; +} +.sub-heading{ + line-height: 30px; + margin: 30px; + font-size: 18px; +} +button{ + border: none; + background-color: #333; + color:#eee; + padding: 10px 20px; +} +#banner .inner .more{ + margin-top: 280px; +} + +.wrapper{ + max-width: 1080px; + margin: 0 auto; +} +.green-section{ + text-align: center; + background-color: #089DB0; + color:#FFF; + padding: 100px 0; +} +h2{ + font-size: 30px; +} +.green-section h2{ + margin-bottom: 30px; +} + +.hr{ + width: 100%; + height: 2px; +} +.green-section .hr{ + background-color: #0B8D9E; + margin: 10px auto; + width: 60%; +} +.green-section .icon-group{ + margin-top: 60px; +} +.green-section .icon-group .icon{ + display: inline-block; + width: 80px; + height: 80px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + margin: 20px; + border :1px solid #06515A; +} + +.image-section{ + width: 45%; +} +.image-section img{ + width:100%; +} +.text-section{ + width: 50%; + /*position: relative; + left:60px; + top:148px;*/ + padding: 120px 30px; +} +.article-preview{ + background-color: #143F53; + color:#fff; +} +.article-preview>div{ + float:left; +} +.article-preview:after{ + content:''; + display: block; + clear:both; +} +.text-section h2{ + margin-bottom: 20px; + text-align: center; +} +.text-section p{ + font-size: 18px; + line-height: 1.2em; + width: 80%; + margin: 0 auto; +} +.article-preview .fr{ + float: right; +} diff --git a/Exercise/cs01-blog/images/Thumbs.db b/Exercise/cs01-blog/images/Thumbs.db new file mode 100644 index 0000000..d3982b7 Binary files /dev/null and b/Exercise/cs01-blog/images/Thumbs.db differ diff --git a/Exercise/cs01-blog/images/banner.jpg b/Exercise/cs01-blog/images/banner.jpg new file mode 100644 index 0000000..e65411e Binary files /dev/null and b/Exercise/cs01-blog/images/banner.jpg differ diff --git a/Exercise/cs01-blog/images/pic01.jpg b/Exercise/cs01-blog/images/pic01.jpg new file mode 100644 index 0000000..b7d45c0 Binary files /dev/null and b/Exercise/cs01-blog/images/pic01.jpg differ diff --git a/Exercise/cs01-blog/images/pic02.jpg b/Exercise/cs01-blog/images/pic02.jpg new file mode 100644 index 0000000..8eec6bb Binary files /dev/null and b/Exercise/cs01-blog/images/pic02.jpg differ diff --git a/Exercise/cs01-blog/images/pic03.jpg b/Exercise/cs01-blog/images/pic03.jpg new file mode 100644 index 0000000..aead8f0 Binary files /dev/null and b/Exercise/cs01-blog/images/pic03.jpg differ diff --git a/Exercise/cs01-blog/index.html b/Exercise/cs01-blog/index.html new file mode 100644 index 0000000..dbb09e3 --- /dev/null +++ b/Exercise/cs01-blog/index.html @@ -0,0 +1,75 @@ + + + + + blog + + + + +

+ + +

一个标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, maxime!

+ item1 + item2 + item3 + item4 +

+ +

又一个标题

+ + + \ No newline at end of file diff --git a/Exercise/ch04-3.html b/Exercise/snippets/ch04-3.html similarity index 100% rename from Exercise/ch04-3.html rename to Exercise/snippets/ch04-3.html diff --git a/Exercise/ch04.html b/Exercise/snippets/ch04.html similarity index 100% rename from Exercise/ch04.html rename to Exercise/snippets/ch04.html diff --git a/Exercise/ex_bs01.html b/Exercise/snippets/ex_bs01.html similarity index 100% rename from Exercise/ex_bs01.html rename to Exercise/snippets/ex_bs01.html diff --git a/Exercise/ex_bs02_component.html b/Exercise/snippets/ex_bs02_component.html similarity index 100% rename from Exercise/ex_bs02_component.html rename to Exercise/snippets/ex_bs02_component.html diff --git a/Exercise/index.html b/Exercise/snippets/index.html similarity index 100% rename from Exercise/index.html rename to Exercise/snippets/index.html diff --git a/README.md b/README.md deleted file mode 100644 index 8f5b7db..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Web-Development -introduce to html5 ,css3 ,js diff --git a/images/Thumbs.db b/images/Thumbs.db new file mode 100644 index 0000000..2290a6b Binary files /dev/null and b/images/Thumbs.db differ diff --git a/index.html b/index.html index 760b8dc..2664e67 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ View on GitHub

Web-development

introducet to html5 ,css3 ,js

introduce to html5 ,css3 ,js

Download this project as a .zip file @@ -61,7 +61,7 @@

-
Web-development maintained by nbcc-java
+
Web-development maintained by 郑哲

Published with GitHub Pages

diff --git a/params.json b/params.json index 6a3a089..86bbd40 100644 --- a/params.json +++ b/params.json @@ -1 +1 @@ -{"name":"Web-development","tagline":"introducet to html5 ,css3 ,js","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file +{"name":"Web-development","tagline":"introduce to html5 ,css3 ,js","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file