Sidebar
html_and_css
**This is an old revision of the document!**
Table of Contents
html
Basic
- Block elements vs inline elements. https://www.w3schools.com/html/html_blocks.asp
add favicon to website
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
insert html code from another file
ref: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file
Solution 1. Use jQuery.js
<!doctype html>
<head>
<script src="script/jquery.js"></script>
<script> $(function(){$("#nav_menu").load("nav_menu.html"); });</script>
</head>
<body>
<div id="nav_menu"></div>
</div>
</body>
Solution 2. Use a custom javascript
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
<h1>Add your HTML code here</h1>\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
');
Or just use the following handy bash script published as a Gist on Github, that automates all necessary work, converting b.html to b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Solution 3. Use htm file and frameset
CSS
在html中使用external stylesheet:
<link rel="stylesheet" type="tex/css" href="LSstyle.css">
不同的vhost共用stylesheet的方法:在每个vhost里面建立symbolic link
ln -s /home/wwwroot/LSstyle.css LSstyle.css
Class vs ID：
- define an id
例如定义一个圆角id
#fixWidthBlockRound { border-radius: 4px; } - deine a class
例如定义img tag的一个圆角class
img.roundedCorner6px{ border-radius:6px; overflow:hidden; }
class可以用于各种元素，但id只针对一个元素：https://www.htmldog.com/guides/css/intermediate/classid/
参考资料：
* CSS dropdown menu https://catalin.red/css3-dropdown-menu/
html_and_css.1622734539.txt.gz · Last modified: 2021/06/03 23:35 by admin