技术首页
  • KK的小故事
HTML
网页文件 显示中文 显示多行文字 段落(p) 链接(a) 标签 列表(ul+li) 图像(img) 网页源代码 网页标题(title) 区域(div) 输入框(input) 选项(checkbox) 下拉选择(select) 字符实体( ) 注释
CSS初步了解
介绍 选择器和属性 派生选择器 id选择器 class选择器 创建方式(link) 做个发信框
CSS常用的知识
背景(background) 隐藏显示(display) 宽高(width+height) 颜色 文字(font) 样式继承 浮动(float) 外边距(margin) 内边距(padding) 样式权重 reset 边框(border) 浏览器调试 盒模型(boxmodel) 绝对定位(absolute) 相对定位(relative) 行高(line-height) 内容越界处理(overflow) 鼠标划过样式(hover)
CSS其它必读基础
联级与块级元素(inline-block) 伪类(:hover之类) 圆角(border-radius) 半透明(opacity) 结语
网页制作实践
导航菜单1 主体内容1

网页基础 ¶

  1. HTML
  2. CSS初步了解
  3. CSS常用的知识
  4. CSS其它必读基础
  5. 网页制作实践

HTML ¶

  • 网页文件
  • 显示中文
  • 显示多行文字
  • 段落(p)
  • 链接(a)
  • 标签
  • 列表(ul+li)
  • 图像(img)
  • 网页源代码
  • 网页标题(title)
  • 区域(div)
  • 输入框(input)
  • 选项(checkbox)
  • 下拉选择(select)
  • 字符实体( )
  • 注释

CSS初步了解 ¶

  • 介绍
  • 选择器和属性
  • 派生选择器
  • id选择器
  • class选择器
  • 创建方式(link)
  • 做个发信框

CSS常用的知识 ¶

  • 背景(background)
  • 隐藏显示(display)
  • 宽高(width+height)
  • 颜色
  • 文字(font)
  • 样式继承
  • 浮动(float)
  • 外边距(margin)
  • 内边距(padding)
  • 样式权重
  • reset
  • 边框(border)
  • 浏览器调试
  • 盒模型(boxmodel)
  • 绝对定位(absolute)
  • 相对定位(relative)
  • 行高(line-height)
  • 内容越界处理(overflow)
  • 鼠标划过样式(hover)

CSS其它必读基础 ¶

  • 联级与块级元素(inline-block)
  • 伪类(:hover之类)
  • 圆角(border-radius)
  • 半透明(opacity)
  • 结语

网页制作实践 ¶

  • 导航菜单1
  • 主体内容1

© KK 2020

 

Powered by Yii Framework
var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('
  • No results
  • '); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '
  • ' + result[key].file.t + '' + '' + result[key].file.d + '
  • '; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });