min-width: 100%; min-height: 100%;} to make the webpage responsive to size changes. I typed in dl {width: 100%; height: auto;} to give the description list a defined size. I typed in dt {background-color:#0090FF; width: 80%; height: 45px; border-style: solid; border-color: white; border-radius:4px;
color: white; font-size: 25px; cursor: pointer;} to give the <dt> tags a background color of blue, width of 80% of its original width, height of 45 pixels, a white border, white text color, font size of 25 pixels, and a change in the mouse cursor when at the <dt> tags. Next I typed in dt:hover { background-color:#00D0FF;} to further indicate that the mouse is at the <dt> tags. After that, I typed in dd {width: 75%; height: 40px; background-color:#DBDBDB; object-position: center; border-radius:4px; font-size: 20px;} to give the <dd> tags 75% of its original width, a height of 40 pixels, background color of grey, center the text, a border, and a font size of 20 pixels. To center the content, I used the class .center { margin-left: auto; margin-right: auto;margin-top: 3px; margin-bottom: 3px;
text-align: center; }. For the JavaScript, I typed in $(document).ready(function(){$("dd").hide(); $(".answer").hide(); $("dl").on("mouseover", "dt", function(){ $(this).next() .slideDown(300) .siblings("dd") .slideUp(300);});}); to make the <dd> tags show when it is sliding down the <dt> tags and when the mouse cursor is at the <dt> tags. Knowing how to use accordions is useful to a web designer as it gives the web designer another tool they can use to enhance their websites.
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_07/Lab_7.html
No comments:
Post a Comment